使用eslint+perttier统一前端代码规范

字数统计: 3.3k字   |   阅读时长≈ 16分

ESLint和Prettier是两个非常流行的JavaScript代码规范工具。ESLint用于检查代码中的语法错误和潜在问题，而Prettier用于格式化代码，使其符合一致的风格。在本文中，我们将介绍如何使用ESLint和Prettier来提高代码质量和可读性 (默认你已经完成项目初始化)。

1、安装EsLint 

1
pnpm i -D eslint

2、初始化配置EsLint

1
pnpm create @eslint/config 或者 npx eslint --init

​ 2.1、选择模式: (To check syntax and find problems)

1
2
3
4
? How would you like to use ESLint? ... 
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style

​ 2.2、选择语言模块: (选JavaScript modules)

1
2
3
4
? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

​ 2.3、选择语言框架: (选Vue.js)

1
2
3
4
? Which framework does your project use? ...
  React
> Vue.js
  None of these

​ 2.4、是否使用ts: (视自己情况而定)

1
? Does your project use TypeScript? » No / Yes

​ 2.5、代码在哪里运行: (用空格选择Browser+Node*)*

1
2
3
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

​ 2.6、您希望的配置文件是什么格式？ (选 * JavaScript)*

1
2
3
4
? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

​ 2.7、您想现在安装他们吗？ (选择Yes)

1
? Would you like to install them now? » No / Yes

​ 2.8、您要使用哪个软件包管理器？ (视自己情况) 

1
2
3
4
? Which package manager do you want to use? ...
  npm
  yarn
> pnpm

3、安装完成后: (在项目根目录会出现.eslintrc.js文件)

1
2
3
4
5
6
7
8
9
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · pnpm

3.1 一次安装下列内容 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

pnpm i prettier eslint-config-prettier eslint-plugin-prettier vite-plugin-eslint vue-eslint-parser -D

----- 分割线 ----
// (用于规范代码格式,不需要可以不装) 
'prettier' // prettier 校验
'eslint-config-prettier' // 关闭所有不必要或可能跟prettier产生冲突的规则
'eslint-plugin-prettier' // 可以让eslint使用prettier规则进行检查
'vue-eslint-parser' // .eslintrc配置 指定如何解析语法

'vite-plugin-eslint'  //  vite-vue项目开启eslint代码校验 需要 在vite.config.ts中配置开启eslint
import eslintPlugin from 'vite-plugin-eslint'
export default defineConfig({
  plugins: [eslintPlugin()],
})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// .eslintrc.js 文件
// 这里就是上面3步骤初始化的文件,后面的配置都写这里
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended", "plugin:@typescript-eslint/recommended"],
  // "plugin:vue/vue3-essential" --  这是一个基本的配置，仅包含了一些必要的规则，用于检查 Vue 3 项目中的常见错误和潜在问题
  // "plugin:vue/vue3-recommended" -- 这是一个推荐的配置，包含了一系列更多的规则，用于检查 Vue 3 项目中的更多场景和最佳实践(优先选择)。
  // "plugin:prettier/recommended" -- 用于在 ESLint 中集成 Prettier 的代码格式化功能 
  // "plugin:@typescript-eslint/recommended" -- 用于在 TypeScript 项目中使用 ESLint 进行代码检查
  
  // 指定如何解析语法
  parser: "vue-eslint-parser",
  // 优先级低于 parse 的语法解析配置
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: "latest",
    sourceType: "module"
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {}
}

4、配置 .prettierrc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 在项目根目录创建文件 .prettierrc | .prettierrc.js | .prettierrc.cjs
// 以下配置视自己情况而定,并不是每个都需要的
module.exports = {
  printWidth: 120, // 单行输出（不折行）的（最大）长度
  tabWidth: 2, // 每个缩进级别的空格数
  tabs: false, // 使用制表符 (tab) 缩进行而不是空格 (space)。
  semi: true, // 是否在语句末尾打印分号
  singleQuote: true, // 是否使用单引号
  quoteProps: "as-needed", // 仅在需要时在对象属性周围添加引号
  trailingComma: "none", // 去除对象最末尾元素跟随的逗号
  bracketSpacing: true, // 是否在对象属性添加空格
  arrowParens: "always", // 箭头函数，只有一个参数的时候，也需要括号
  proseWrap: "always", // 当超出print width（上面有这个参数）时就折行
  htmlWhitespaceSensitivity: "ignore", // 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的
  vueIndentScriptAndStyle: false, // 在VUE文件中不要缩进脚本和样式标记
  stylelintIntegration: true,
  endOfLine: "auto",
}

5、配置 .prettierignore (在项目根目录创建文件 .prettierignore 将下面文件加入校验白名单)

1
2
3
4
5
6
7
8
/dist/*
.local
.output.js
.cz-config.js
/node_modules/**
**/*.svg
**/*.sh
/public/*

6、配置 .eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/**
 *
 * "off" 或 0 - 关闭规则
 * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
 * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
 */

module.exports = {
  root: true, // 必须设置 不然校验不会生效
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended", "plugin:@typescript-eslint/recommended"],
  /* 指定如何解析语法。可以为空，但若不为空，只能配该值，原因见下文。*/
   parser: "vue-eslint-parser",
  /* 优先级低于parse的语法解析配置 */
   parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: "latest",
    sourceType: "module"
  },
  /* 这里时配置规则的,自己看情况配置 */
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? 1 : 0,
    "no-debugger": process.env.NODE_ENV === "production" ? 1 : 0,
    'no-duplicate-case': 'warn',         // 禁止出现重复case
    'no-empty': 'warn',                  // 禁止出现空语句块
    'no-extra-parens': 'warn',           // 禁止不必要的括号
    'no-func-assign': 'warn',            // 禁止对Function声明重新赋值
    'no-else-return': 'warn',            // 禁止if语句中return语句之后有else块
    'no-empty-function': 'warn',         // 禁止出现空的函数块
    'no-lone-blocks': 'warn',            // 禁用不必要的嵌套块
    'no-multi-spaces': 'warn',           // 禁止使用多个空格
    'no-useless-catch': 'warn',          // 禁止不必要的catch子句
    'no-useless-return': 'warn',         // 禁止不必要的return语句
    'no-mixed-spaces-and-tabs': 'warn',  // 禁止空格和tab的混合缩进
    'no-multiple-empty-lines': 'warn',   // 禁止出现多行空行
    'no-trailing-spaces': 'warn',        // 禁止一行结束后面不要有空格
    'no-useless-call': 'warn',           // 禁止不必要的.call()和.apply()
    'no-var': 'warn',                    // 禁止出现var用let和const代替
    'no-shadow': 'off',                  // 允许变量声明与外层作用域的变量同名
    'dot-notation': 'warn',              // 要求尽可能地使用点号
    'default-case': 'warn',              // 要求switch语句中有default分支
    'eqeqeq': 'warn',                    // 要求使用 === 和 !==
    'curly': 'warn',                     // 要求所有控制语句使用一致的括号风格
    'space-before-blocks': 'warn',       // 要求在块之前使用一致的空格
    'space-in-parens': 'warn',           // 要求在圆括号内使用一致的空格
    'space-infix-ops': 'warn',           // 要求操作符周围有空格
    'space-unary-ops': 'warn',           // 要求在一元操作符前后使用一致的空格
    'switch-colon-spacing': 'warn',      // 要求在switch的冒号左右有空格
    'arrow-spacing': 'warn',             // 要求箭头函数的箭头前后使用一致的空格
    'array-bracket-spacing': 'warn',     // 要求数组方括号中使用一致的空格
    'brace-style': 'warn',               // 要求在代码块中使用一致的大括号风格
    'camelcase': 'warn',                 // 要求使用骆驼拼写法命名约定
    'indent': ['warn', 4],               // 要求使用JS一致缩进4个空格
    'max-depth': ['warn', 4],            // 要求可嵌套的块的最大深度4
    'max-statements': ['warn', 100],     // 要求函数块最多允许的的语句数量20
    'max-nested-callbacks': ['warn', 3], // 要求回调函数最大嵌套深度3
    "vue/require-default-prop": 0,                     // 关闭属性参数必须默认值
    "vue/singleline-html-element-content-newline": 0,  // 关闭单行元素必须换行符
    "vue/multiline-html-element-content-newline": 0,   // 关闭多行元素必须换行符
    "vue/multi-word-component-names": "off",
    "vue/no-deprecated-v-on-native-modifier": "off",
   }
}

7、统一配置 .vscode 工作区保存

7.1. 新建文件 .vscode >> extensions.json – 推荐安装的插件

1
2
3
4
5
6
7
8
9
10
11
12
{
	"recommendations": [
		"vue.volar",
		"vue.vscode-typescript-vue-plugin",
		"hollowtree.vue-snippets",
		"dbaeumer.vscode-eslint",
		"stylelint.vscode-stylelint",
		"esbenp.prettier-vscode",
		"editorconfig.editorconfig",
		"mikestead.dotenv"
	]
}

7.2. 新建文件 .vscode >> settings.json – 统一vscode的配置

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

8、其它 (整个流程下来安装的包 package.json)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
"scripts": {
  //...
  "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
  "lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
}

"devDependencies": {
    // eslint解析相关的包
    "@typescript-eslint/eslint-plugin": "^5.38.0",
    "@typescript-eslint/parser": "^5.38.0",

    // eslint相关的包
    "eslint": "^8.17.0",
    "eslint-plugin-vue": "^9.1.0",
    "vue-eslint-parser": "^9.0.2",
    
    // vite 搭配 eslint 的包
    "vite-plugin-eslint": "^1.6.1",

    // prettier相关的包
    "prettier": "^2.6.2",

    // eslint 与 prettier推荐包
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
  }

9、commit 校验 (当我们想要在git commit 时自动对eslint进行修复可以使用 husky + lint-staged 来完成。)

9.1 安装husky lint-staged插件

1
pnpm i husky lint-staged -D

9.2 package.json 中添加脚本

1
2
pnpm set-script prepare "husky install" 
pnpm set-script lint-staged "lint-staged"

9.3 根目录创建.husky文件夹,将 git hooks 钩子交由husky执行

1
pnpm prepare

9.4 添加 commit-msg 钩子,执行信息校验

1
2
3
4
5
6
7
8
9
10
11
12
npx husky add .husky/pre-commit "npm run lint-staged"
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

// 根目录下新建 lint-staged.config.js
module.exports = {
  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
  "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],
  "package.json": ["prettier --write"],
  "*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
  "*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
  "*.md": ["prettier --write"]
};

9.5 安装 commit 校验工具

1
pnpm i @commitlint/cli @commitlint/config-conventional -D

9.6 创建 commitlint.config.js 配置文件

1
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

9.7 安装可自定义的cz适配器

1
pnpm i -D cz-customizable

9.8 在根目录创建 .cz-config.js文件

1
echo > .cz-config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// .cz-config.js  可在网上查找
"use strict";
module.exports = {
	types: [
		{ value: "feat", name: "✨特性:    一个新的特性" },
		{ value: "fix", name: "🐛修复:    修复一个Bug" },
		{ value: "docs", name: "📝文档:    变更的只有文档" },
		{ value: "style", name: "💄格式:    空格, 分号等格式修复" },
		{ value: "refactor", name: "🛠 重构:    代码重构，注意和特性、修复区分开" },
		{ value: "perf", name: "⚡️性能:    提升性能" },
		{ value: "test", name: "✅测试:    添加一个测试" },
		{ value: "ci", name: "🔧工具:    开发工具变动(构建、脚手架工具等)" },
		{ value: "revert", name: "⏪回滚:    代码回退" },
		{ value: "chore", name: "🗯chore:    杂务,不属于以上类型,例如run build、引入或更新软件包等" }
	],
	scopes: [{ name: "main" }, { name: "dev" }],
	messages: {
		type: "选择一种你的提交类型:",
		scope: "选择一个scope (可选):",
		// used if allowCustomScopes is true
		customScope: "Denote the SCOPE of this change:",
		subject: "短说明:\n",
		body: '长说明，使用"|"换行(可选)：\n',
		breaking: "非兼容性说明 (可选):\n",
		footer: "关联关闭的issue，例如：#31, #34(可选):\n",
		confirmCommit: "确定提交说明?"
	},
	allowCustomScopes: true,
	allowBreakingChanges: ["特性", "修复"],
	// limit subject length
	subjectLimit: 100
};

9.9 将cz-customizable脚本添加到您的 package.json

1
npm set-script commit "git pull && git add . && cz-customizable"

9.10 代码提交 (使用pnpm commit之后 按照流程操作即可)

1
2
3
pnpm commit
...
git push

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
Vue2、Vue3、Nginx、
ThreeJs、Node等单词拼写

联系QQ: 1217133705

这个人很懒，不愿留下什么
那就，一起加油