vue3配置eslint

---

theme: devui-blue

highlight: atelier-dune-dark

一、创建项目

文档：https://cli.vuejs.org/zh/

1、全局安装vue-cli

```bash npm install -g @vue/cli

OR

yarn global add @vue/cli ```

2、创建项目

bash vue create vue3-eslint

创建时，建议自定义，创建的选项如下：

3、初始化时的文件

红圈是eslint ，需要的插件，尽量就下载这个版本，负责版本对不上，也可能无法使用

初始的package.json: ```json { "name": "vue3-webpack-ts-monorepo", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "vue": "^3.2.13", "vue-router": "^4.0.3" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-typescript": "~5.0.0", "@vue/cli-service": "~5.0.0", "@vue/eslint-config-standard": "^6.1.0", "@vue/eslint-config-typescript": "^9.1.0", "eslint": "^7.32.0", "eslint-plugin-import": "^2.25.3", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^5.1.0", "eslint-plugin-vue": "^8.0.3", "sass": "^1.32.7", "sass-loader": "^12.0.0", "typescript": "~4.5.5" } }

```

4、下载Visual Studio Code插件

ESLint

Stylelint

Vue Language Features (Volar)

Error Lens

二、对关于eslint的文件进行改造

1、.eslintrc.js 对进行补充

javascript /** * 官网： https://cn.eslint.org/docs/user-guide/getting-started * 规则查阅：https://cn.eslint.org/docs/rules/ * 参考资料： http://tech.tea-culture.top/code/eslint/#eslint-%E8%A7%84%E5%88%99%E6%80%BB%E8%A7%88 https://blog.csdn.net/image_fzx/article/details/118195141 https://blog.csdn.net/weixin_57649833/article/details/120757938 */ module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/vue3-essential', '@vue/standard', '@vue/typescript/recommended' ], parserOptions: { ecmaVersion: 2020 }, rules: { 'vue/attribute-hyphenation': 0, // 自定义组件名称 - 驼峰和连字符 'vue/component-definition-name-casing': 0, // html 闭括号-换行 'vue/html-closing-bracket-newline': [2, { singleline: 'never', multiline: 'always' }], // html 闭括号之前无空格 'vue/html-closing-bracket-spacing': 2, // html 需要有结束标签，除了自闭合标签 'vue/html-end-tags': 2, // 缩进html 'vue/html-indent': ['error', 4, { attribute: 1, baseIndent: 1, closeBracket: 0, alignAttributesVertically: true, ignores: [] }], 'vue/max-attributes-per-line': [2, { singleline: 4, multiline: 4 }], // 禁止组件已注册但未使用的情况 'vue/no-unused-components': [2], 'no-multiple-empty-lines': 2, 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-constant-condition': 2, // 禁止在条件中使用常量表达式 if(true) if(1) 'no-trailing-spaces': 1, // 一行结束后面不要有空格 'no-var': 2, // 禁用var，用let和const代替 'consistent-this': [2, 'that'], // this别名 indent: ['error', 4], 'no-dupe-args': [2], // 文件的最大行数 'max-lines': ['error', { max: 600, skipBlankLines: true, // 忽略空白行 skipComments: true // 忽略只包含注释的行 }], // 遇见对象花括号换行 'object-curly-newline': ['error', { ObjectExpression: 'always', ObjectPattern: { multiline: true }, ImportDeclaration: 'never', ExportDeclaration: { multiline: true, minProperties: 3 } }] } }

2、.editorconfig

```bash root = true [*.{js,jsx,ts,tsx,vue}] indentstyle = space indentsize = 4 trimtrailingwhitespace = true insertfinalnewline = true

是否删除行尾的空格

trimtrailingwhitespace = true

是否在文件的最后插入一个空行

insertfinalnewline = true ```

3、设置项目的 settings.json

编辑器使用vsc为例，在项目下创建 .vscode ——> settings.json

json { "commentTranslate.source": "Bing", /* eslint */ "eslint.run": "onSave", "editor.formatOnSave": false, // 要格式化的文件类型 "eslint.validate": [ "typescript", "typescriptreact", "javascript", "tsx", "vue", "html" ], "editor.tabSize": 4, "eslint.alwaysShowStatus": true, "stylelint.validate": [ "css", "less", "postcss", "scss", "vue", "sass" ], //不索引一些不必要索引的大文件夹以减少内存和CPU消耗 "search.exclude": { "**/.git/objects/**": true, "**/node_modules/**": true, "**/dist/**": true } }

三、使用 stylelint 格式化vue中的css代码

1、在 .vscode ——> settings.json 加入 stylelint.validate 中的代码

bash { /* eslint */ "eslint.run": "onSave", "editor.codeActionsOnSave": { "source.fixAll": true, }, "editor.formatOnSave": true, // 要格式化的文件类型 "eslint.validate": [ "typescript", "typescriptreact", "javascript", "tsx", "vue", "html" ], "stylelint.validate": [ "css", "less", "postcss", "scss", "vue", "sass" ], "editor.tabSize": 4, "eslint.alwaysShowStatus": true }

2、下载stylelint的插件

注：建议直接复制过去用,复制到 package.json 中

bash "stylelint": "^13.13.1", "stylelint-config-standard": "^22.0.0", "stylelint-scss": "^3.21.0",

3、在根目录下创建 .stylelintrc.js 文件

javascript /** * https://chinese.freecodecamp.org/news/vscode-vite-vue3-ts-eslint-stylelint-automatic-code-formatting/ */ module.exports = { extends: 'stylelint-config-standard', rules: { 'indentation': 4, 'selector-pseudo-element-no-unknown': [ true, { ignorePseudoElements: ['v-deep'] } ], 'number-leading-zero': 'never', 'no-descending-specificity': null, 'font-family-no-missing-generic-family-keyword': null, 'selector-type-no-unknown': null, 'at-rule-no-unknown': null, 'no-duplicate-selectors': null, 'no-empty-source':null, 'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['global'] }] } }

注：记得重启vsc。