ESlint与Prettier配置指南

前言

我们开发项目的时候,总能遇到一种情况,我们只修改了几行代码,但是最后提交上去前发现好多地方都被修改了,还有的时候,拉下来的代码,到自己的IDE中,莫名出现了很多警告,其实这就是代码没有做规范导致.其实就是缺乏一个统一的规范,下面我就分享一下开发项目中如何配置一个适合协作制订规范的代码格式化配置方案,走起~~~

ESlint是什么

官网: eslint.bootcss.com/

官网是这样说的,可组装的JavaScript和JSX检查工具,官方就是官方…说的很官方….🤦🏻‍♀️ 要让我来说,ESlint帮助我们去统一的规范一些代码的书写规范,这个规范是什么呢?比如字符串用单引号,代码结尾是否有;等等这些,它帮我们统一的在项目中有一个统一的书写形式,OK,闲话不多说,开始

ESlint配置

1. 初始化一个项目,这里我使用Koa举例

mkdir eslint-test
cd eslint-test
npm init -y
npm i koa
touch index.js

现在目录如下

.
├── index.js
├── node_modules
├── package-lock.json
└── package.json

然后我们写一段Koa代码

// index.js
const Koa = require("koa");
const app = new Koa();

// response
app.use(ctx => {
  ctx.body = 'Hello Koa';
});

app.listen(3000);

好的,项目基本就搭建完毕👆🏻

2. 安装ESlint, 并运行

npm i eslint -D
npx eslint --init

3. 配置ESlint(重要) 如何使用ESlint?

我们选择检查语法,找出问题,强制代码风格

使用那种模块引入形式?

我们选择CommonJS

使用了哪种框架?

这里我们由于用的Koa,因此选择不是这些

你项目中有使用TS吗?

选择NO

你的项目在什么环境运行?

选择Node

你想打算如何在项目中定义代码风格?

使用流行的方案

你打算选择哪一种代码风格?

这里我们选择Airbnb为例

你的ESlint配置文件是什么格式?

我们选择JavasScript就可以

是否现在就通过npm安装相关依赖?

YES~

然后就开始根据我们配置去安装相应依赖了,并生成了一个ESlint配置文件

然后我们在命令行执行

npx eslint . --fix

执行前

执行后

代码就自动修复了👌

虽然通过命令的形式可以帮助我们去修改代码格式,但是如果我们想在写代码的时候就能直接发现问题,就需要安装一个vscode的插件

安装后

至此,在写代码的时候我们就可以找出我们的代码风格问题所在了👏

其实我们还可以更懒,我们在保存文件的时候就自动帮我们修复好,那岂不是美哉?

这里我们需要修改一个vscode中的settings.json

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
 }

这里是我们自己的编辑器拥有了保存自动修复功能,如果我们的项目给了其他同事,让他们也保存自动修复,我们可以在项目根目录加入vscode配置文件,将上面的配置添加上

这么好用的功能,怎能不分享一下呢~

Prettier是什么

前面我们说了ESlint的作用,那么Prettier是什么?其实ESlint做了两件事,一件是修复代码质量,另一件就是修复代码格式,但是ESlint的代码格式做的不够彻底,不够过于的强迫性,大白话就是不够有自己的风格,当然这个风格是一个比较标准的风格,因此,就需要Prettier来加强

Prettier配置

官网: prettier.io/

安装Prettier插件

项目中我们安装

npm i prettier -D

配置.prettierrc, 这里随便写了几个,具体可查看官网配置,我在下面找了一些常用的配置供参考

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": false
}

// 常用配置相关解释
printWidth: 100, // 超过最大值换行
tabWidth: 4, // 缩进字节数
useTabs: false, // 缩进不使用tab，使用空格
semi: true, // 句尾添加分号
singleQuote: true, // 使用单引号代替双引号
proseWrap: "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
arrowParens: "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
disableLanguages: ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
endOfLine: "auto", // 结尾是 \n \r \n\r auto
eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验
htmlWhitespaceSensitivity: "ignore",
ignorePath: ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行
jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
parser: "babylon", // 格式化的解析器，默认是babylon
requireConfig: false, // Require a 'prettierconfig' to format prettier
stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验
trailingComma: "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
tslintIntegration: false // 不让prettier使用tslint的代码格式进行校验

格式项目所有文件代码

npx prettier --write .

执行完发现,我刚才用ESlint格式化的代码怎么都报错了?其实这是ESlint和Prettier之间产生了冲突

解决ESlint与Prettier的冲突

1. 关掉与Prettier产生冲突的ESlint格式相关配置,使用eslint-config-prettier这个插件

npm i eslint-config-prettier -D

然后在.eslintrc.js加入perttier扩展

// .eslintrc.js
module.exports = {
  env: {
    commonjs: true,
    es2021: true,
    node: true
  },
  extends: ['airbnb-base', 'prettier'], // 覆盖eslint格式配置,写在最后
  parserOptions: {
    ecmaVersion: 13
  },
  rules: {}
}

配置后,就解决了相互冲突的问题,现在格式的问题就由Prettier接手,但是我们还是想通过ESlint来自动保存,我们就要把Prettier的修复通过ESlint来体现, 就需要eslint-plugin-prettier配置

npm i eslint-plugin-prettier -D

// 最终的.eslintrc.js
module.exports = {
  env: {
    commonjs: true,
    es2021: true,
    node: true
  },
  extends: ['airbnb-base', 'plugin:prettier/recommended'], // 覆盖eslint格式配置,写在最后
  parserOptions: {
    ecmaVersion: 13
  }
}

至此,ESlint和Prettier就解决完了,其他项目如Vue和React也是同理,按照这个步骤就可以打造我们自己的代码风格了

代码: github.com/wykun1120/e…