vue3项目最新eslint9+prettier+husky+stylelint+vscode配置

一、eslint9和prettier通用配置

安装必装插件

ESlint@9.x

1. pnpm add eslint@latest -D

复制代码

ESlint配置 vue 规则 , typescript解析器

1. pnpm add eslint-plugin-vue typescript-eslint -D

复制代码

ESlint配置 JavaScript 规则

1. pnpm add @eslint/js -D

复制代码

配置所有全局变量 globals

1. pnpm add globals -D

复制代码

eslint 兼容prettier插件

1. pnpm add  eslint-plugin-prettier -D

复制代码

prettier 插件

1. pnpm add prettier -D

复制代码

eslint.config.js通用配置文件（可直接复制使用）

1. import globals from 'globals'
2. import eslint from '@eslint/js'
3. import tseslint from 'typescript-eslint'
4. import eslintPluginVue from 'eslint-plugin-vue'
5. import vueParser from 'vue-eslint-parser'
6. import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
8. export default [
9.   {
10.     ignores: [
11.       'node_modules',
12.       'dist',
13.       '.gitignore',
14.       'package.json',
15.       'package-lock.json',
16.       'dist-ssr',
17.       '*.local',
18.       '.npmrc',
19.       '.DS_Store',
20.       'dev-dist',
21.       'dist_electron',
22.       '*.d.ts',
23.       'src/assets/**'
24.     ]
25.   },
26.   /** js推荐配置 */
27.   eslint.configs.recommended,
28.   /** vue推荐配置 */
29.   ...eslintPluginVue.configs['flat/recommended'],
30.   /** prettier 配置 */
31.   eslintPluginPrettierRecommended,
33.   //javascript 规则
34.   {
35.     files: ['**/*.{js,mjs,cjs,vue,ts}'],
36.     rules: {
37.       // 对象结尾逗号
38.       'comma-dangle': 'off',
40.       // 关闭未定义变量
41.       'no-undef': 'off',
43.       // 确保 Prettier 的行为不会被 ESLint 覆盖
44.       quotes: ['error', 'single', { allowTemplateLiterals: true }],
46.       // 关闭对未定义变量的警告
47.       'no-undefined': 'off',
49.       //不使用的变量不报错
50.       'no-unused-vars': 'off',
52.       // 禁止使用不规范的空格
53.       'no-irregular-whitespace': 'off',
55.       // 函数括号前的空格
56.       'space-before-function-paren': 0,
58.       // 箭头函数的空格
59.       'arrow-spacing': [
60.         2,
61.         {
62.           before: true,
63.           after: true
64.         }
65.       ],
67.       // 代码块的空格
68.       'block-spacing': [2, 'always'],
70.       // 大括号风格
71.       'brace-style': [
72.         2,
73.         '1tbs',
74.         {
75.           allowSingleLine: true
76.         }
77.       ],
79.       // 对象属性换行
80.       'object-property-newline': 'off',
82.       // JSX 引号风格
83.       'jsx-quotes': [2, 'prefer-single'],
85.       // 对象键值对之间的空格
86.       'key-spacing': [
87.         2,
88.         {
89.           beforeColon: false,
90.           afterColon: true
91.         }
92.       ],
94.       // 关键字之间的空格
95.       'keyword-spacing': [
96.         2,
97.         {
98.           before: true,
99.           after: true
100.         }
101.       ],
103.       // 构造函数首字母大写
104.       'new-cap': [
105.         2,
106.         {
107.           newIsCap: true,
108.           capIsNew: false
109.         }
110.       ],
112.       // new 操作符使用时需要括号
113.       'new-parens': 2,
115.       // 禁止使用 Array 构造函数
116.       'no-array-constructor': 2,
118.       // 禁止调用 caller 和 callee
119.       'no-caller': 2,
121.       // 禁止重新分配类名
122.       'no-class-assign': 2,
124.       // 禁止条件中的赋值操作
125.       'no-cond-assign': 2,
127.       // 禁止 const 重新分配
128.       'no-const-assign': 2,
130.       // 正则表达式中的控制字符
131.       'no-control-regex': 0,
133.       // 禁止删除变量
134.       'no-delete-var': 2,
136.       // 禁止在函数参数中使用重复名称
137.       'no-dupe-args': 2,
139.       // 禁止在类中使用重复名称的成员
140.       'no-dupe-class-members': 2,
142.       // 禁止在对象字面量中使用重复的键
143.       'no-dupe-keys': 2,
145.       // 禁止重复的 case 标签
146.       'no-duplicate-case': 2,
148.       // 禁止空的字符类
149.       'no-empty-character-class': 2,
151.       // 禁止空的解构模式
152.       'no-empty-pattern': 2,
154.       // 禁止使用 eval
155.       'no-eval': 2,
157.       // 不允许出现空的代码块
158.       'no-empty': 2,
160.       // 禁止不必要的布尔转换
161.       'no-extra-boolean-cast': 2,
163.       // 禁止不必要的括号
164.       'no-extra-parens': [2, 'functions'],
166.       // 禁止 case 语句落空
167.       'no-fallthrough': 2,
169.       // 禁止在数字后面添加小数点
170.       'no-floating-decimal': 2,
172.       // 禁止对函数声明重新赋值
173.       'no-func-assign': 2,
175.       // 禁止出现歧义多行表达式
176.       'no-unexpected-multiline': 2,
178.       // 禁止不需要的转义
179.       'no-useless-escape': 0,
181.       // 数组的括号前后的间距
182.       'array-bracket-spacing': [2, 'never']
183.     }
184.   },
186.   // vue 规则
187.   {
188.     files: ['**/*.vue'],
189.     languageOptions: {
190.       parser: vueParser,
191.       globals: { ...globals.browser, ...globals.node },
192.       parserOptions: {
193.         /** typescript项目需要用到这个 */
194.         parser: tseslint.parser,
195.         ecmaVersion: 'latest',
196.         /** 允许在.vue 文件中使用 JSX */
197.         ecmaFeatures: {
198.           jsx: true
199.         }
200.       }
201.     },
202.     rules: {
203.       'vue/component-definition-name-casing': 'off',
204.       'vue/singleline-html-element-content-newline': ['off'],
205.       'vue/no-mutating-props': [
206.         'error',
207.         {
208.           shallowOnly: true
209.         }
210.       ],
211.       // 要求组件名称始终为 “-” 链接的单词
212.       'vue/multi-word-component-names': 'off',
214.       // 关闭 index.html 文件报 clear 错误
215.       'vue/comment-directive': 'off',
217.       // 关闭对 defineProps 的有效性检查
218.       'vue/valid-define-props': 'off',
220.       // 允许在一个文件中定义多个组件
221.       'vue/one-component-per-file': 'off',
223.       // 关闭 Prop 类型要求的警告
224.       'vue/require-prop-types': 'off',
225.       // 关闭属性顺序要求
226.       'vue/attributes-order': 'off',
228.       // 关闭对默认 Prop 的要求
229.       'vue/require-default-prop': 'off',
231.       // 关闭连字符命名检验
232.       'vue/attribute-hyphenation': 'off',
234.       // 关闭自闭合标签的要求
235.       'vue/html-self-closing': 'off',
237.       // 禁止在关闭的括号前有换行
238.       'vue/html-closing-bracket-newline': 'off',
239.       // 允许使用 v-html 指令
240.       'vue/no-v-html': 'off'
241.     }
242.   }
243. ]

复制代码

.prettierrc.js 通用配置文件（可直接复制使用）

   注意如prettier配置的格式没效果可更改文件后缀为.prettierrc.json或.prettierrc.yaml

1. module.exports = {
2.   printWidth: 120, // 一行的字符数换行
3.   tabWidth: 2, // 一个tab代表几个空格数
4.   useTabs: false, // 是否使用tab进行缩进
5.   singleQuote: true, // 字符串是否使用单引号
6.   semi: false, // 行尾是否使用分号，默认为true
7.   trailingComma: 'none', // 是否使用尾逗号
8.   arrowParens: 'avoid', // 箭头函数单变量省略括号
9.   bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
10.   endOfLine: 'auto', // 保留在 Windows 和 Unix 下的换行符
11.   quoteProps: 'preserve' // 对象属性的引号使用
12. }

复制代码

package.json 的scripts配置

1.   "scripts": {
2.     "lint:fix": "eslint . --fix",
3.     "lint": "eslint .",
4.   },

复制代码

.prettierignore 配置文件

1. .DS_Store
2. node_modules
3. dist
4. dist-ssr
5. *.local
6. .npmrc
7. dev-dist
8. dist_electron
9. auto-imports.d.ts

复制代码

二、配置git hooks提交检验

安装lint-staged

   mrm 安装 lint-staged 的同时会安装 husky

1. pnpm install mrm -D
2. npx mrm lint-staged

复制代码

然后它会自动在package.json文件中的script对象中生成

1. "prepare": "husky install"

复制代码

生成的大概只有一条或俩条，本身再加几条

1. "lint-staged": {
2.     "*.{js,jsx,vue,ts,tsx}": [
3.       "eslint --fix",
4.       "prettier --write"
5.     ],
6.     "*.{scss,less,css,html,md}": [
7.       "prettier --write"
8.     ],
9.     "package.json": [
10.       "prettier --write"
11.     ],
12.     "{!(package)*.json,.!(browserslist)*rc}": [
13.       "prettier --write--parser json"
14.     ]
15.   }

复制代码

同时在根目录也会生成.husky目录，如下图

配置 commitlint

1. pnpm install @commitlint/cli @commitlint/config-conventional -D  

复制代码

1. npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"   

复制代码

当运行之后就会生成这样如下图

   如没有自动生成，手动创建文件，复制以下内容

1. #!/usr/bin/env sh
2. . "$(dirname -- "$0")/_/husky.sh"
4. npx --no -- commitlint --edit ${1}

复制代码

新建commitlint.config.cjs

1. module.exports = {
2.   extends: ['@commitlint/config-conventional'],
3.   rules: {
4.     'type-enum': [
5.       // type枚举
6.       2,
7.       'always',
8.       [
9.         'build', // 编译相关的修改，例如发布版本、对项目构建或者依赖的改动
10.         'feat', // 新功能
11.         'fix', // 修补bug
12.         'docs', // 文档修改
13.         'style', // 代码格式修改, 注意不是 css 修改
14.         'refactor', // 重构
15.         'perf', // 优化相关，比如提升性能、体验
16.         'test', // 测试用例修改
17.         'revert', // 代码回滚
18.         'ci', // 持续集成修改
19.         'config', // 配置修改
20.         'chore', // 其他改动
21.       ],
22.     ],
23.     'type-empty': [2, 'never'], // never: type不能为空; always: type必须为空
24.     'type-case': [0, 'always', 'lower-case'], // type必须小写，upper-case大写，camel-case小驼峰，kebab-case短横线，pascal-case大驼峰，等等
25.     'scope-empty': [0],
26.     'scope-case': [0],
27.     'subject-empty': [2, 'never'], // subject不能为空
28.     'subject-case': [0],
29.     'subject-full-stop': [0, 'never', '.'], // subject以.为结束标记
30.     'header-max-length': [2, 'always', 72], // header最长72
31.     'body-leading-blank': [0], // body换行
32.     'footer-leading-blank': [0, 'always'], // footer以空行开头
33.   },
34. }

复制代码

配置完成可提交代码测试
三、.editorconfig 编辑器配置

项目根目录创建 .editorconfig文件

1. # 修改配置后重启编辑器
2. # 配置项文档：https://editorconfig.org/
4. # 告知 EditorConfig 插件，当前即是根文件
5. root = true
7. # 适用全部文件
8. [*]
9. ## 设置字符集
10. charset = utf-8
11. ## 缩进风格 space | tab，建议 space（会自动继承给 Prettier）
12. indent_style = space
13. ## 缩进的空格数（会自动继承给 Prettier）
14. indent_size = 2
15. ## 换行符类型 lf | cr | crlf，一般都是设置为 lf
16. end_of_line = lf
17. ## 是否在文件末尾插入空白行
18. insert_final_newline = true
19. ## 是否删除一行中的前后空格
20. trim_trailing_whitespace = true
22. # 适用 .md 文件
23. [*.md]
24. insert_final_newline = false
25. trim_trailing_whitespace = false

复制代码

四、 stylelint 配置

vscode 安装插件Stylelint

使用scss作为预处理器，安装以下依赖：

1. pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

复制代码

新建 .stylelintrc.cjs

在项目根目录下新建 .stylelintrc.cjs，并填入如下代码：

1. module.exports = {
2.   extends: [
3.     'stylelint-config-standard', // 配置stylelint拓展插件
4.     'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
5.     'stylelint-config-standard-scss', // 配置stylelint scss插件
6.     'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
7.     'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
8.     'stylelint-config-prettier', // 配置stylelint和prettier兼容
9.   ],
10.   overrides: [
11.     {
12.       files: ['**/*.(scss|css|vue|html)'],
13.       customSyntax: 'postcss-scss',
14.     },
15.     {
16.       files: ['**/*.(html|vue)'],
17.       customSyntax: 'postcss-html',
18.     },
19.   ],
20.   ignoreFiles: [
21.     '**/*.js',
22.     '**/*.jsx',
23.     '**/*.tsx',
24.     '**/*.ts',
25.     '**/*.json',
26.     '**/*.md',
27.     '**/*.yaml',
28.   ],
29.   /**
30.    * null  => 关闭该规则
31.    * always => 必须
32.    */
33.   rules: {
34.     'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
35.     'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
36.     'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
37.     'no-empty-source': null, // 关闭禁止空源码
38.     'selector-class-pattern': null, // 关闭强制选择器类名的格式
39.     'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
40.     'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符
41.     'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
42.     'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
43.     'selector-pseudo-class-no-unknown': [
44.       // 不允许未知的选择器
45.       true,
46.       {
47.         ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改element默认样式的时候能使用到
48.       },
49.     ],
50.   },
51. }

复制代码

新建 .stylelintignore 文件

在项目根目录下新建 .stylelintignore 文件，并填入如下代码：

1. /node_modules/*
2. /dist/*
3. /html/*
4. /public/*

复制代码

添加脚本

在 packjson.json 文件的 script 字段中添加下令

1. "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"

复制代码

五、 项目中根目录下 .vscode 的配置

1. ┌─根目录
2. │  ├─.vscode
3. │  │  └─settings.json

复制代码

settings.json

1. {
2.   "prettier.enable": true,
3.   "editor.codeActionsOnSave": {
4.     "source.fixAll.eslint": "explicit"
5.   },
6.   "[vue]": {
7.     "editor.defaultFormatter": "esbenp.prettier-vscode"
8.   },
9.   "[javascript]": {
10.     "editor.defaultFormatter": "esbenp.prettier-vscode"
11.   },
12.   "[typescript]": {
13.     "editor.defaultFormatter": "esbenp.prettier-vscode"
14.   },
15.   "[json]": {
16.     "editor.defaultFormatter": "esbenp.prettier-vscode"
17.   },
18.   "[jsonc]": {
19.     "editor.defaultFormatter": "esbenp.prettier-vscode"
20.   },
21.   "[html]": {
22.     "editor.defaultFormatter": "esbenp.prettier-vscode"
23.   },
24.   "[css]": {
25.     "editor.defaultFormatter": "esbenp.prettier-vscode"
26.   },
27.   "[scss]": {
28.     "editor.defaultFormatter": "esbenp.prettier-vscode"
29.   },
30.   "eslint.validate": [
31.     "javascript",
32.     "vue",
33.     "vue-html",
34.     "typescript",
35.     "typescriptreact",
36.     "html",
37.     "css",
38.     "scss",
39.     "less",
40.     "json",
41.     "jsonc",
42.     "json5",
43.     "markdown"
44.   ]
45. }

复制代码

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