手把手教你使用ESLint+Prettier规范项目代码
发布网友
发布时间：2024-09-28 03:33
共1个回答
热心网友
时间：2024-10-25 22:06
相信小伙伴们在小学时都经历过小平头时代，那时的教务处主任天天学校门口巡视，同学们更是一个个心惊胆战。那时的我们就好比一行行代码，如果发型不一，上来就是两...55555不说了...?所以说统一样式更有助于我们更统一的管理，也会使我们少犯错误，这时ESlint站出来了，它就是教务处主任的化身，会将我们的形形色色的发型(代码)统一起来，虽然验证过得代码不一定完美，但是一定相对规范。
什么是ESLint?ESLint是一个用来识别ECMAScript并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次eslint代码检查，就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃，可以有效的控制项目代码的质量。
ESlint的主要作用1.代码质量问题：使用/编写的方式有可能有问题(problematicpatterns)
2.代码风格问题：风格不符合一定规则(doesn’tadheretocertainstyleguidelines)
就好比有些同学喜欢使用tab缩进，有些喜欢空格，有些喜欢2个空格，有些喜欢4个。这就难办了，到底听谁的？
最后经过一番舌战，选定2个空格作为标准。于是乎我们在根目录创建了配置文件.eslintrc并写入了我们的伦果
//?.eslintrc????{??????????"indent":?["error",?2]????}为了大家的提高大家的开发体检及提交的一致性，你还‘威逼利诱’的让大家下载了vscode插件，没有通过ESLint校验的代码VSCode会给予下滑波浪线提示，提醒他好好检查。
为了保证提交代码的万无一失，你还添加一个pre-commit钩子?eslint--ext.jssrc，确保没有通过lint的代码不会被提交。
最后还要求了大家使用eslint--fix?将之前的所有代码，一键修改成了新规范下的代码格式。
什么是Prettier?一个流行的代码格式化工具的名称,它能够解析代码,使用你自己设定的规则来重新打印出格式规范的代码。
Tony老师认为发型很重要，Prettier也这么认为。Prettier认为格式很重要，但是格式好麻烦，我来帮你们定好吧。简单来说，不需要我们再思考究竟是用singlequote，还是doublequote这些乱起八糟的格式问题，Prettier帮你处理。最后的结果，可能不是你完全满意，但是，绝对不会丑。
Prettier接管了两个问题其中的代码格式的问题，而使用Prettier+ESLint就完完全全解决了两个问题
当然，教务处主任和Tony老师对发型的理解‘不共戴天’，所以我们还需要对他们进行一番深入交流。下面就让我们一起开始吧！
正文依赖安装在你的项目中安装以下依赖，这些依赖只需安装在开发环境配置中
npm?install?eslint?prettier?--save-devnpm?install?eslint-config-prettier?eslint-plugin-prettier?--save-devvscode插件安装安装vscode插件?ESLint?和?Prettier-Codeformatter
如果希望在每次保存时自动格式化代码可以加上以下配置
项目下创建.vscode/settings.json配置(也可以配置到全局)
配置每次报错自动ESLint检查规则并格式化
{"editor.codeActionsOnSave":?{?"source.fixAll.eslint":?true}}添加配置文件添加配置文件.eslintrc.js
//?.eslintrcmodule.exports?=?{??plugins:?['prettier'],??//?prettier?一定要是最后一个，才能确保覆盖??rules:?{????'prettier/prettier':?'error',??},??extends:?['plugin:prettier/recommended'],};上面配置在运行报错时可选以下配置
//?.eslintrcmodule.exports?=?{??plugins:?['prettier'],??parser:?"vue-eslint-parser",??parserOptions:?{????sourceType:?'module',????ecmaVersion:?2020,????parser:?'babel-eslint',??},??rules:?{????'prettier/prettier':?'error',????"parser":?0??},??extends:?['plugin:prettier/recommended'],};以下是我的个人配置，仅供参考
创建配置文件.prettierrc.js
//.prettierrc.jsmodule.exports?=?{??//?一行最多?120?字符??printWidth:?120,??//?使用?2?个空格缩进??tabWidth:?2,??//?不使用?tab?缩进，而使用空格??useTabs:?false,??//?行尾需要有分号??semi:?true,??//?使用单引号代替双引号??singleQuote:?true,??//?对象的?key?仅在必要时用引号??quoteProps:?'as-needed',??//?jsx?不使用单引号，而使用双引号??jsxSingleQuote:?false,??//?末尾使用逗号??trailingComma:?'all',??//?大括号内的首尾需要空格?{?foo:?bar?}??bracketSpacing:?true,??//?箭头函数，只有一个参数的时候，也需要括号??arrowParens:?'always',??//?每个文件格式化的范围是文件的全部内容??rangeStart:?0,??rangeEnd:?Infinity,??//?不需要写文件开头的?@prettier??requirePragma:?false,??//?不需要自动在文件开头插入?@prettier??insertPragma:?false,??//?使用默认的折行标准??proseWrap:?'preserve',??//?根据显示样式决定?html?要不要折行??htmlWhitespaceSensitivity:?'css',??//?换行符使用?lf??endOfLine:?'lf',};添加命令??//?package.json中scripts中加入??"lint":?"eslint?--ext?.js,.vue?src",??//?检查项目是否符合eslint规则??"prettier":?"prettier?--write?.",?????//?一键格式化所有文件忽略文件当然，在特殊情况下，比如某个学生是校长的儿子，女儿之类的，教务处长总会睁一只眼，闭一只眼。所以我们也需要进行一些选择性的忽视。
eslint忽略文件
.eslintignore
prettier忽略文件
.prettierignore
忽略规则与.gitignore一致
报错及异常情况Tip1:执行npmrunlint报'prettier/prettier':context.getPhysicalFilenameisnotafunction
移除以下依赖，项目中不存在的就不用移除
npm?rm?@vue/cli-plugin-babel?@vue/cli-plugin-eslint?@vue/eslint-config-prettier?eslint?eslint-plugin-prettier?eslint-plugin-vue?prettier安装指定版本的依赖
npm?i?-D?@vue/cli-plugin-babel@4.4.6?@vue/cli-plugin-eslint@4.4.6?@vue/eslint-config-prettier@7.0.0?eslint@7.15.0?eslint-plugin-prettier@3.4.1?eslint-plugin-vue@7.2.0?prettier@2.5.1Tip2:执行npmrunlint报#Vueerror:Parsingerror:Unexpectedtoken<
在.eslintrc.js中加入parser:'vue-eslint-parser'
Tip3执行?npmrundev报Cannotfindmodule'core-js/modules/es.array.concat.js'
在babel.config.js文件中的presets添加userBuiltIns
npm?install?eslint?prettier?--save-dev0原文：https://juejin.cn/post/7095689037889372191
