Eslint,StyleLint,CommitLint,Prettier安装与配置

本文最后更新于：2024年4月25日 上午

Eslint

推荐阅读:

《搞懂 ESLint 和 Prettier》(乃乎)

安装

vscode安装eslint插件

1
pnpm i eslint vite-plugin-eslint -D

配置文件

使用下三个指令之一即可初始化Eslint配置

1
2
3
eslint --init                  # 已全局安装
npm init @eslint/config
pnpm create @eslint/config

使用命令会提示做出选项自动生成对应的配置文件,打开文件发现有错误'module' is not defined

在文件中的env添加node: true即可解决

eslintrc.js. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.export = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {},
};

vite-plugin-eslint可以在开发时提示问题

vite.config.ts 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ...
import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig({
  // ...
  plugins: [
    // ...
    eslintPlugin({
      include: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx', '**/*.vue', '**/*.svelte'],
      extends: ['**/node_modules/**'],
    })
  ]
  // ...
})

忽略检查

.prettierignore文件写法同.gitignore

1
2
dist

与Prettier的兼容问题

首先安装eslint-plugin-prettier(将prettier规则导入eslint)与eslint-config-prettier(禁用eslint与prettier冲突检查项)

1
pnpm i eslint-config-prettier eslint-plugin-prettier -D

在extends选项加入"plugin:prettier/recommended"即可关闭Eslint与Prettier的冲突检测,并由将对Prettier的配置导入Eslint

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
+   'plugin:prettier/recommended',
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
+ plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
+  	'prettier/prettier': 'warn'
  },
}

开始检查

在package.json中新增脚本

1
2
3
4
5
6
7
8
{
  // ...
  "scripts": {
    // ...
    "lint": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./"
  },
  // ...
}

执行pnpm lint发现有error 'React' must be in scope when using JSX错误

配置extens插件解决

1
2
3
4
5
6
7
module.exports = {
  // ...
  extends: [
    // ...
    'plugin:react/jsx-runtime'
  ]
}

再次pnpm lint又提示Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .

搜索一下原来要指定react版本

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
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {},
  settings: {
    react: {
      version: 'detect', // 自动推导react`install`的版本
    },
  },
}

再pnpm lint就没有警告与错误了,并在文件中修改不符合prettier规范时也会保存提示

快速格式化

另外也可配置保存时自动格式化不用再用lint指令了

打开vscode,ctrl+shift+p搜索setting.json打开后添加如下配置保存即可自动保存时格式化

1
2
3
4
5
6
7
8
{
  // ...
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true
  },
  // ...
}

vscode已安装eslint插件

Prettier

安装

vscode安装插件prettier

1
pnpm i -D -E prettier

--save-exact(-E)用于固定prettier版本

配置文件

安装完成后执行以下命令初始化Prettier

1
pnpm create prettier

配置完风格选项后自动生成.prettierrc.yaml配置文件

prettierrc.yaml. 

1
2
3
4
5
6
7
8
9
10
printWidth: 80
tabWidth: 2
useTabs: false
semi: false
singleQuote: true
trailingComma: all
bracketSpacing: true
jsxBracketSameLine: false
arrowParens: always

风格配制

1
2
3
tabWidth: 2        # tab格数
semi: true         # 是否加分号
singleQuote: false # 是否使用单引号

全部Prettier配置

忽略检查

.prettierignore文件写法同.gitignore

prettierignore. 

1
2
dist

快速格式化

vscode快捷键ctrl+shift+F可快速修正(右键使用...格式化文档选择prettier)

打开vscode,ctrl+shift+p搜索setting.json打开后添加如下配置保存即可自动保存时格式化

1
2
3
4
5
6
{
  // ...
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
  // ...
}

vscode已安装Prettier插件

Stylelint

stylelint用于对css进行格式化(如对css属性书写进行排序)

Husky与lint-staged

安装husky(方便的处理git钩子,在git执行命令前后添加指令)

安装lint-staged对进入git暂存区的文件lint检查(当仓库很大时可以不用格式化整个仓库的代码，仅检查需要提交的代码)

1
2
pnpm i husky lint-staged -D
pnpm dlx mrm@2 lint-staged

pnpm dlx mrm@2 lint-staged命令用于自动配置husky与lint-staged, 执行后在package.json文件中添加了scripts，在执行依赖安装命令(pnpm install)时自动执行husky install, 并配置了lint-staged属性

1
2
3
4
5
6
7
8
9
10
11
{
  // ...
  "scripts": {
    // ...
    "prepare": "husky install",
  },
  "lint-staged": {
    "*.js": "eslint --fix --cache",
    "*": ""
  }
}

再执行pnpm i(项目已经创建git仓库)会自动执行husky install并生成.husky文件夹

新建husky钩子函数执行lint-staged指令在git commit提交前匹配的文件自动执行lint-staged中的命令

Commitlint

1
2
pnpm i commitlint -D
pnpm husky add .husky/commit-msg "pnpm commitlint -e $1"

Gitmoji-cli

1
pnpm add gitmoji-cli -g

使用gitmoji -c进行交互式提交

使用gitmoji -i添加git commit钩子(所有人)

参考文档:

《vue3+ts+vite项目中使用eslint+prettier+stylelint+husky指南》(yusongH)

《从0开始搭建一个Vue3.x企业级项目骨架》

《搞懂 ESLint 和 Prettier》(乃乎)

IT宝库 (itbaoku.cn)

Eslint,StyleLint,CommitLint,Prettier安装与配置
https://qingshaner.com/Prettier配置/
作者
清山
发布于
2022年6月12日
许可协议