一步一步教你如何在 angular 项目中使用 eslint 以及 prettier 配合 husky 实现自动控制代码结构

工具安装

Prettier

首先，安装prettier

1

npm install --save-dev --save-exact prettier

不同版本的 prettier 有不同的格式实现，所以需要精准安装，并且，您使用的任何插件或可共享配置都必须在任何一种情况下本地安装!!!

然后创建配置文件 .prettierrc.json 这是我的配置

1
2
3
4
5
6
7
8
9
10
11
12
13

{
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "bracketSpacing": true,
    "jsxBracketSameLine": true,
    "printWidth": 120,
    "endOfLine": "lf",
    "proseWrap": "preserve",
    "trailingComma": "es5",
    "useTabs": false
}

别忘记了忽略文件 .perttierignore 下面是我的配置

1
2
3
4
5
6
7

# Ignore artifacts:
build
coverage
publish

#尚未准备好处理html
*.html

当然 vscode 有配套的插件 Prettier - Code formatter，安装之后会读取你工作区的配置文件

Eslint

第一步还是安装

1

npm install eslint --save-dev

然后初始化

1

npx eslint --init

–init假设您已经有一个package.json文件

配置规则

初始化之后，你会在你的 .eslintrc.{js,yml,json} 文件中看到以下内容

1
2
3
4
5
6

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

名称 semi 和 quotes 是 ESLint 中规则的名称。第一个值是规则的错误级别，可以是以下值之一：

off 或 0 - 关闭规则
warn 或 1 - 打开规则作为警告（不影响退出代码）
error 或 2- 将规则作为错误打开（退出代码将为 1）

具体规则描述👉规则

您的.eslintrc.{js,yml,json}配置文件还将包含以下行：

1
2
3

{
    "extends": "eslint:recommended"
}

这说明你的 Eslint 将会继承默认推荐规则, 即在规则页面前有 ✅ 的规则

配合使用

配合配合 Eslint 和 Prettier 你需要安装一个 Eslint 的 prettier 配置

安装

1

npm install --save-dev eslint-config-prettier

配置

然后添加 prettier 到 .eslintrc.* 文件的 extends 数组中

1
2
3
4
5
6

{
   " extends " : [
     " some-other-config-you-use " ,
     " prettier "
  ]
}

Git 预提交钩子

1

npx mrm lint-staged

这将安装 husky 和 lint-staged，然后向项目添加一个配置，该配置package.json将在预提交挂钩中自动格式化支持的文件。

此时你的 package.json

1
2
3
4

"lint-staged": {
    "*.ts": "eslint --cache --fix", // 默认为js，自行按需修改，下同
    "*.{js,ts,css,scss,md}": "prettier --write"
  }

注意：如果您使用 ESLint，请确保 lint-staged Eslint 在 Prettier 之前而不是之后运行它。

如果需要husky在你提交代码时检查您的提交信息则请看另外文章

写在最后

本文只是应用的一次 step to step ，若想深入了解操作原理还需仔细阅读官方文档

1. Eslint
2. Prettier
3. Prettier 与 Linter配合
4. Lint-staged