Vue2老项目配置ESLint和Prettier

接手一个老项目Vue2，由VueCli构建，需要集成一下ESLint和Prettier，保证代码规范
  1. 安装以下插件

• 安装的时间需要指定一下版本号，太新的会有标题
  

1. npm install -D eslint@7.32.0 prettier@2.4.1 @babel/eslint-parser@7.12.16 @vue/cli-plugin-eslint@5.0.0 eslint-config-prettier@8.3.0 eslint-plugin-prettier@4.0.0 eslint-plugin-vue@8.0.3

复制代码

1.1. eslint

用于检查和标示出ECMAScript/JavaScript代码规范标题工具。
1.2. prettier

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。
1.3. @babel/eslint-parser

简而言之就是一个剖析器，允许您使用ESLint对所有有用的Babel代码进行检查。
ESLint允许使用自定义剖析器，当使用此插件时，代码会被Babel剖析器剖析，并且生成的AST被转换成一个ESLint可以明白的符合ESTree的布局，所有的位置信息如行列也会保存，因此可以轻松的追踪错误
1.4. @vue/cli-plugin-eslint

vue-cli的eslint 插件，检查和修复文件
1.5. eslint-config-prettier

禁用掉了一些不必要的以及和 Prettier 相辩论的 ESLint 规则；
1.6. eslint-plugin-prettier

将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的尺度时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化；这样就相当于将 Prettier 整合进了 ESLint 中；
1.7. eslint-plugin-vue

Vue.js的官方ESLint插件,即使用eslint检查.vue文件的template和script
1.8. devDependencies如下

2. 项目配置

2.1. 根目次新建.eslintrc.js

1. module.exports = {
2.         root: true, // 在根目录下寻找.eslintrc.js文件，如果当前工作区打开的项目不是在根目录，则查找.eslintrc.js文件会失败，且eslint检查也不会生效
3.         env: {
4.                 node: true
5.         },
6.         extends: [
7.                 'plugin:vue/essential',
8.                 'eslint:recommended',
9.                 'plugin:prettier/recommended' // 冲突时使用prettier的规则进行覆盖
10.         ],
11.         parserOptions: {
12.                 parser: '@babel/eslint-parser'
13.         },
14.         rules: {
15.                 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
16.                 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
17.                 'vue/multi-word-component-names': 'off', // 不校验组件名
18.                 'vue/no-multiple-template-root': 0, // 不需要使用根元素包裹template的内容
19.                 'vue/no-mutating-props': 0, //允许子元素通过v-model修改父元素传的props值
20.                 'vue/no-use-v-if-with-v-for': 0, //允许v-if和v-for共存
21.                 'vue/valid-template-root': 0, //允许只有一个template
22.                 'no-empty': 0 //允许代码块为空
23.         }
24. };

复制代码

2.2. 根目次新建.eslintignore文件

   eslintignore用来告诉ESLint忽略特定的文件或文件夹，不对它们进行代码检查的配置文件。通常情况下，你可能会盼望在项目中包含一些不需要被 ESLint 检查的文件，比如第三方库、主动生成的文件、测试文件等。根据项目自行配置

1. # docker
2. docker/
3. *.sh
4. node_modules
5. lib
6. *.md
7. *.scss
8. *.woff
9. *.ttf
10. .vscode
11. .idea
12. dist
13. mock
14. public
15. bin
16. build
17. config
18. index.html
19. src/assets

复制代码

2.3. 根目次新建.prettierrc.js文件

文件名可以是.prettierrc（JSON格式）也可以是 .prettierrc.js/prettier.config.js（js格式，需要module.exports一个对象）这里使用 .prettierrc.js文件进行配置

1. module.exports = {
2.         printWidth: 80, // 一行最多 80 字符(默认80)
3.         tabWidth: 2, // 每个tab相当于多少个空格（默认2）
4.         useTabs: true, // 是否使用tab进行缩进（默认false）
5.         semi: true, // 行尾需要有分号(默认true)
6.         singleQuote: true, // 使用单引号（默认false）
7.         quoteProps: 'as-needed', // 对象的 key 仅在必要时用引号
8.         jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
9.         trailingComma: 'none', // 多行使用拖尾逗号（默认none）
10.         bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"（默认true）
11.         jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
12.         htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行
13.         arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid:添加括号）
14.         endOfLine: 'auto', // 行尾换行符
15. };

复制代码

2.4. 根目次新建.prettierignore

.prettierignore 文件是用来告诉 Prettier 忽略特定的文件或文件夹，不对它们进行代码格式化的配置文件
可根据项目自行配置

1. # docker
2. docker/
3. *.sh
4. node_modules
5. lib
6. *.md
7. *.scss
8. *.woff
9. *.ttf
10. .vscode
11. .idea
12. dist
13. mock
14. public
15. bin
16. build
17. config
18. index.html
19. src/assets

复制代码

2.5. package.json中配置新指令

1. "scripts": {
2.   "lint": "vue-cli-service lint",
3.   "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
4.   "prettier": "prettier --write .",
5. },

复制代码

  运行npm run lint即可一键检查和修复了
运行npm run lint:eslint即可使用eslint检查修复
运行npm run lint:prettier即可使用prettier格式化了
  3. vscode的配置

3.1. 安装Eslint 和Prettier

、

3.2. 用户配置文件settings.json配置保存主动修复代码

• 在 vscode 的用户配置文件settings.json（或者项目中的.vscode/settings.json）中需要加入以下配置，来控制保存时间就可以修复代码
  

1. {
2.   /* eslint配置 */
3.   "eslint.enable": true, // 是否开启eslint
4.   "eslint.alwaysShowStatus": true, // 底部eslint状态栏显示
5.   // code代码保存时，自动eslint修复
6.   "editor.codeActionsOnSave": {
7.     "source.fixAll.eslint": true
8.   },
9.   "eslint.validate": ["javascript", "javascriptreact", "html", "vue", "vue-html"]
10. }

复制代码

4. 怎样关闭lint

• vue.config.js中配置
  

1. const { defineConfig } = require('@vue/cli-service')
2. module.exports = defineConfig({
3.   transpileDependencies: true,
4.   // 关闭lint
5.   lintOnSave: false
6. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。