前端代码规范，代码风格的最佳实践落地。

---

前言

团队代码规范实践落地。仅供参考
一、 设置 ESLint

ESLint的最佳落地实践涉及多个方面，包括设置、集成、实行和监测等。以下是一些关键步骤和最佳实践，以确保ESLint在团队中有效落地：

• ESLint官方文档：ESLint - Pluggable JavaScript linter - ESLint中文
  

安装依赖

1. pnpm install -D eslint @eslint/create-config

复制代码

生成设置文件

1. #  生成 ESLint 配置文件模板
2. npx eslint --init

复制代码

1. # 出现如下选择
3. # 选择2 我们会使用 prettier 进行代码风格校验
4. How would you like to use ESLint?
5. 1.只检查语法
6. 2.检查语法并提示问题
7. 3.检查语法、提示问题并且强制使用一些代码风格
9. # 你的项目用的哪一种模块化方式 选择1
10. What type of modules does your project use?
11. 1.ES6
12. 2.CommonJS
13. 3.None
15. # 使用的框架 选择2
16. Which framework does your project use?
17. 1.React
18. 2.Vue.js
19. 3.None
21. # 项目是否使用TS yes
22. Does your project use TypeScript?
24. # 项目在哪里跑的 选择1
25. Where does your code run?
26. 1.browser
27. 2.node
29. # 项目用哪种配置文件 选择1
30. What format do you want your config file to be in?
31. 1.JavaScript
32. 2.YAML
33. 3.JSON
35. # 是否立即安装需要的依赖
36. Would you like to install them now?
37. # 会帮我们安装如下插件
38. # pnpm install -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

复制代码

1. module.exports = {
2.   // 使 eslint 支持 node 与 ES6
3.   env: {
4.     browser: true,
5.     es2021: true,
6.     node: true,
7.   },
8.   // 引入推荐的语法校验规则
9.   extends: [
10.     'plugin:vue/vue3-recommended',
11.     'plugin:@typescript-eslint/recommended',
12.   ],
13.   overrides: [],
14.   /*
15.    这里一定要配置对 先使用vue-eslint-parser 再使用@typescript-eslint/parser
16.    先解析 <template> 标签中的内容 然后再解析 vue <script> 标签中的 TS 代码
17.    */
18.   // 选择使用的解析器
19.   parser: 'vue-eslint-parser',
20.   // 解析器的详细配置
21.   parserOptions: {
22.     // 使用最新版 ES 语法
23.     ecmaVersion: 'latest',
24.     // 使用 ESLint TS 解析器
25.     parser: '@typescript-eslint/parser',
26.     // 使用 ES 模块化规范
27.     sourceType: 'module',
28.   },
29.   // 使用的插件
30.   plugins: ['vue', '@typescript-eslint'],
31.   // 自定义规则
32.   rules: {},
33. };

复制代码

• 设置完规则后我们设置一条指令用于代码质量的修复
  

1. // package.json
2. // --cache 为仅检测改动过的代码
3. // --max-warnings 0 表示出现超过0个警告强制eslint以错误状态推出
4. "scripts": {
5.   "lint:eslint": "eslint --cache --max-warnings 0 {src,mock}/**/*.{vue,ts,tsx} --fix",
6. },

复制代码

我们还可以设置忽略文件，让 ESLint 不对这些文件举行校验。
新建 .eslintignore 举行设置。

1. node_modules
2. *.md
3. .vscode
4. .idea
5. dist
6. /public
7. /docs
8. .husky
9. .local
10. /bin

复制代码

自动修复

• 大部分IDE支持在修改代码后举行自动修复
  

• WebStorme：直接在Setting中搜索ESLint即可举行设置
  
• VSCode：必要在项目目次下参加如下设置文件，还必要下载ESLint插件
  

/.vscode/settings.json

1. {
2.   "editor.codeActionsOnSave": {
3.     "source.fixAll": true
4.   }
5. }

复制代码

二、设置 Prettier

• 多人协作的项目开发中，保持同一的代码风格是一件很紧张的事。
  
• Prettier就可以帮我们做到这个事情，但是ESLint不是也能规范代码风格么？可以是可以，但是相比Prettier差了许多，术业有专攻，Prettier可以让我们拥有超级整齐的代码。可以资助我们设置是否使用分号，缩进的格式等等。
  
• 官方文档：Prettier 中文网 · Prettier 是一个“有态度”的代码格式化工具
  

安装依赖

1. pnpm install -D prettier

复制代码

添加设置文件

• Prettier设置文件名称可以为：.ptettierrc.js、.ptettier.config.js （根据个人习惯选择即可）
  
• 下面是我常用的一些设置，更多设置规则各人可以前官网检察：Options · Prettier 中文网
  

1. module.exports = {
2.   printWidth: 120, //单行长度
3.   tabWidth: 4, //缩进长度
4.   useTabs: true, //使用空格代替tab缩进
5.   semi: true, //句末使用分号
6.   singleQuote: true, //使用单引号
7.   endOfLine: "auto",
8.   trailingComma: "none", // 对象最后一个属性末尾是否要逗号
9. };

复制代码

• 设置一个指令便于我们使用prettier举行修复代码风格
  

1. {
2.   "script": {
3.     "lint:prettier": "prettier --write **/*.{js,json,tsx,css,less,scss,vue,html,md}",
4.   }
5. }

复制代码

办理ESLint与Prettier辩论标题

安装依赖

1. pnpm install -D eslint-config-prettier eslint-plugin-prettier

复制代码

• eslint-config-prettier 的作用是关闭eslint中与prettier相互辩论的规则。
  
• eslint-plugin-prettier 的作用是赋予eslint用prettier格式化代码的本领。 安装依赖并修改.eslintrc文件。
  

设置ESLint

1. / 此配置在eslint配置文件中新增
2. "extends": [
3.   "eslint:recommended",
4.   "plugin:vue/vue3-recommended",
5.   "plugin:@typescript-eslint/recommended",
6.   "plugin:prettier/recommended" // 在最后面新增extends
7. ],

复制代码

设置完成之后我们对代码风格的设置只会使用prettier的设置，相当于将eslint中辩论的规则覆盖掉了。
我们还可以设置忽略文件，让 Prettier 不对这些文件举行校验。
新建 .prettierignore 举行设置。

1. /dist/*
2. /node_modules/**

复制代码

三、设置 StyleLint

• Stylelint 是一个强盛、先进的 CSS 代码查抄器（linter），可以资助你规避 CSS 代码中的错误并保持一致的编码风格。
  
• 但是 StyleLint 与 Prettier 也有设置辩论，所以我们也要将 StyleLint 中与 Prettier 辩论的设置关闭。
  

安装依赖

1. pnpm install -D stylelint stylelint-config-standard
3. pnpm install -D stylelint-config-prettier stylelint-config-html stylelint-order stylelint-less postcss-html postcss-less stylelint-config-standard-vue

复制代码

• stylelint-config-standard：StyleLint 推荐设置
  
• stylelint-config-prettier：关闭与 prettier 辩论的设置
  
• stylelint-config-standard-vue：StyleLint Vue 项目推荐设置
  
• postcss-html postcss-less：支持查抄 less 与 html
  
• stylelint-order：支持 css 样式排序
  

添加设置文件

• Prettier设置文件名称可以为：.stylelintrc.js、.stylelint.config.js （根据个人习惯选择即可）
  
• 更多详细设置规则请检察官方文档：List of rules | Stylelint 中文文档 (bootcss.com)
  

1. module.exports = {
2.   // 继承推荐规范配置
3.   extends: [
4.     'stylelint-config-standard',
5.     'stylelint-config-prettier',
6.     'stylelint-config-recommended-scss',
7.     'stylelint-config-standard-vue',
8.   ],
9.   // 添加规则插件
10.   plugins: ['stylelint-order'],
11.   // 不同格式的文件指定自定义语法
12.   overrides: [
13.     {
14.       files: ['**/*.(scss|css|vue|html)'],
15.       customSyntax: 'postcss-scss',
16.     },
17.     {
18.       files: ['**/*.(html|vue)'],
19.       customSyntax: 'postcss-html',
20.     },
21.   ],
22.   // 忽略检测文件
23.   ignoreFiles: [
24.     '**/*.js',
25.     '**/*.jsx',
26.     '**/*.tsx',
27.     '**/*.ts',
28.     '**/*.json',
29.     '**/*.md',
30.     '**/*.yaml',
31.   ],
32.   // 自定义配置规则
33.   rules: {
34.     // 便于配置变量 关闭未知属性检测
35.     'property-no-unknown': null,
36.     // 指定类选择器的模式
37.     'selector-class-pattern': null,
38.     // 允许 Vue 的 global
39.     'selector-pseudo-class-no-unknown': [
40.       true,
41.       {
42.         ignorePseudoClasses: ['global'],
43.       },
44.     ],
45.     // 允许 Vue 的 v-deep
46.     'selector-pseudo-element-no-unknown': [
47.       true,
48.       {
49.         ignorePseudoElements: ['v-deep'],
50.       },
51.     ],
52.     // 允许对应内核前缀
53.     'property-no-vendor-prefix': null,
54.   },
55. };

复制代码

我们还可以设置忽略文件，让 StyleLint 不对这些文件举行校验。
新建 .stylelintignore 举行设置。

1. /dist/*
2. /public/*
3. public/*
4. /mock/*
5. /node_modules/*
6. /types/*

复制代码

四、设置 Husky

• 团队协作时，我们会碰到多种标题，最让人难熬的就是每个人誊写的代码风格不一致