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

工具安装

Prettier

首先,安装prettier

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

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

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

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

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

# Ignore artifacts:
build
coverage
publish

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

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

Eslint

第一步还是安装

npm install eslint --save-dev

然后初始化

npx eslint --init

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

配置规则

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

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

名称 semiquotes 是 ESLint 中规则的名称。第一个值是规则的错误级别,可以是以下值之一:

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

具体规则描述👉规则

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

{
    "extends": "eslint:recommended"
}

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

配合使用

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

安装

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

配置

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

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

Git 预提交钩子

npx mrm lint-staged

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

此时你的 package.json

"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
Last modification:March 10, 2022
如果觉得文章对你有所收获,可以请笔者喝杯咖啡