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

Author： Lindo
发布时间：June 29, 2021
162views
No comments
2467 words
Categories： FrontEnd 奇技淫巧 git NodeJs

<div class="tip share">请注意，本文编写于 152 天前，最后修改于 152 天前，其中某些信息可能已经过时。</div>

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

## 工具安装

### Prettier

#### 首先，安装prettier

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

#### 然后创建配置文件 .prettierrc.json 这是我的配置
```
{
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "bracketSpacing": true,
    "jsxBracketSameLine": true,
    "printWidth":140,
    "endOfLine": "auto",
    "proseWrap": "preserve",
    "trailingComma": "none",
    "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"]
    }
}
```

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

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

>具体规则描述👉[规则](https://eslint.org/docs/rules/)

您的.eslintrc.{js,yml,json}配置文件还将包含以下行：
```
{
    "extends": "eslint:recommended"
}
```

这说明你的 `Eslint` 将会继承默认推荐规则, 即在[规则](https://eslint.org/docs/rules/)页面前有 ✅ 的规则

## 配合使用

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

#### 安装
```
npm install --save-dev eslint-config-prettier
```

#### 配置
然后添加 `prettier` 到 `.eslintrc.*` 文件的 `extends` 数组中
```
{
   " extends " : [
     " some-other-config-you-use " ,
     " prettier "
  ]
}
```

### Git 预提交钩子

```
npx mrm lint-staged
```

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

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

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

## 写在最后

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

1. [Eslint](https://eslint.org/docs/user-guide/getting-started)
2. [Prettier](https://prettier.io/docs/en/index.html)
3. [Prettier 与 Linter配合](https://prettier.io/docs/en/integrating-with-linters.html)
4. [Lint-staged](https://github.com/okonet/lint-staged)

Last modification：June 29th, 2021 at 04:29 pm

If you think my article is useful to you, please feel free to appreciate

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

Lindo • 2021 年 06 月 29 日

<div class="tip share">请注意，本文编写于 152 天前，最后修改于 152 天前，其中某些信息可能已经过时。</div>

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

## 工具安装

### Prettier

#### 首先，安装prettier

#### 别忘记了忽略文件  .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"]
    }
}
```

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

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

>具体规则描述👉[规则](https://eslint.org/docs/rules/)

您的.eslintrc.{js,yml,json}配置文件还将包含以下行：
```
{
    "extends": "eslint:recommended"
}
```

这说明你的 `Eslint` 将会继承默认推荐规则, 即在[规则](https://eslint.org/docs/rules/)页面前有 ✅ 的规则

## 配合使用

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

#### 安装
```
npm install --save-dev eslint-config-prettier
```

#### 配置
然后添加 `prettier` 到 `.eslintrc.*` 文件的 `extends` 数组中
```
{
   " extends " : [
     " some-other-config-you-use " ,
     " prettier "
  ]
}
```

### Git 预提交钩子

```
npx mrm lint-staged
```

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

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

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

## 写在最后

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

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

Leave a Comment Cancel reply

关于毕业的一些小问题

昆承湖畔

博客小目标终结

临近毕业的随想

handsome主题音乐插件启动失败

《移动迷宫3》

写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

IOS在桌面添加web站点图标以及增加启动动画来模仿原生App

从游戏设计的角度重新分析游戏--设计师教你玩游戏

《遗愿清单》

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