使用ESLint+Prettier来统一前端代码风格

Prettier是什么？

Prettier的中文意思是“漂亮的、机灵的”，也是一个流行的代码格式化工具的名称，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。

Prettier具有以下几个有优点：

1. 可配置化
2. 支持多种语言
3. 集成多数的编辑器
4. 简洁的配置项

使用Prettier在code review时不需要再讨论代码样式，节省了时间与精力。

如何对Prettier进行配置

一共有三种方式支持对Prettier进行配置：

1. 根目录创建 .prettierrc 文件，能够写入YML、JSON的配置格式，并且支持.yaml/.yml/.json/.js后缀；
2. 根目录创建 .prettier.config.js 文件，并对外export一个对象；
3. 在 package.json 中新建prettier属性。

下面我们使用 prettierrc.js 的方式对prettier进行配置，同时讲解下各个配置的作用。

module.exports = {
  "printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80
  "tabWidth": 2, //一个tab代表几个空格数，默认为80
  "useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  "singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号
  "semi": true, //行尾是否使用分号，默认为true
  "trailingComma": "none", //是否使用尾逗号，有三个可选值"<none|es5|all>"
  "bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  "parser": "babylon" //代码的解析引擎，默认为babylon，与babel相同。
}

配置大概列出了这些，还有一些其他配置可以在官方文档进行查阅。

 

注意一点，parser的配置项官网列出了如下可选项：

• babylon
• flow
• typescript Since v1.4.0
• postcss Since v1.4.0
• json Since v1.5.0
• graphql Since v1.5.0
• markdown Since v1.8.0

但是如果你使用了vue的单文件组件形式，记得将  parser 配置为vue，目前官方文档没有列出来。当然如果你自己写过AST的解析器，也可以用你自己的写的  parser: require("./my-parser") 。

如果你有一个旧项目想通过Prettier + editorConfig来简单规范一下格式也可以使用这个工具：

1. 安装工具不必多说了
2. 创建  .prettierrc 配置文件
   该配置文件会继承 editorConfig 的配置
3. 向 package.json 添加脚本: " prettier": "prettier --write ./* "

   例如 ：


   prettier": "prettier --write './src/**/*.js' './src/**/*.jsx' './src/**/*.css' './src/**/*.scss'

    

4. 创建  .prettierignore  文件，用来忽略一些文件 && 目录
5. 一切准备就绪之后 !!!!  npm run prettier  就可以看到提示文件更改记录了

配置文件简单预览：

# .prettierrc.js 配置文件

// https://prettier.io/docs/en/options.html

module.exports = {

  trailingComma: "es5", // 数组 对象尾随逗号 [arr, ] { obj, }

  bracketSpacing: true, // 对象空格 { foo: bar }, false=> {foo:bar}

  jsxBracketSameLine: false, // jsx闭标签是否另起一行 <Test></Test>

  arrowParens: 'avoid', // 箭头函数是否省略括号 a=> a, (a)=> a

  singleQuote: true, // 单引号

  semi: true, //是否在语句末尾就分号

}

 

# .prettierignore 文件配置
/node_modules
/dist
/src/lib/
/src/global/fonts

 

ESLint 与 Prettier配合使用

 首先肯定是需要安装 prettier ，并且你的项目中已经使用了 ESLint ，有 eslintrc.js 配置文件。

 

npm i -D prettier

配合ESLint检测代码风格

安装插件：

npm i -D eslint-plugin-prettier

 

 eslint-plugin-prettier 插件会调用 prettier对你的代码风格进行检查，其原理是先使用 prettier对你的代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被 prettier进行标记。

接下来，我们需要在 eslintrc.js 的 rules 中添加， "prettier/prettier": "error" ，表示被 prettier 标记的地方抛出错误信息。

//.eslintrc.js
{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

 

借助ESLint的autofix功能，在保存代码的时候，自动将抛出error的地方进行fix。
如果你的eslint是直接通过cli方式启动的，那么只需要在后面加上fix即可，如：  eslint --fix 。

如果与已存在的插件冲突怎么办

npm i -D eslint-config-prettier

通过使用eslint-config-prettier配置，能够关闭一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。使用的时候需要确保，这个配置在extends的最后一项。

//.eslintrc.js
{
  extends: [
    'standard', //使用standard做代码规范
    "prettier",
  ],
}

这里有个文档，列出了会与prettier冲突的配置项。

同时使用上面两项配置

如果你同时使用了上述的两种配置，那么你可以通过如下方式，简化你的配置。

//.eslintrc.js
{
  "extends": ["plugin:prettier/recommended"]
}

最后贴一下我们项目中的完整配置，是在vue-cli生成的代码基础上修改的，并且使用standard做代码规范：

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    es6: true
  },
  extends: [
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard',
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    "plugin:prettier/recommended",
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    "prettier/prettier": "error",
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

什么？你们项目没有启用ESLint

 

不要慌，没有ESLint也不要怕，可以通过onchange进行代码的监听，然后自动格式化代码。只要在package.json的scripts下添加如下代码，然后使用 npm run format ，我们就能监听src目录下所有的js文件并进行格式化：

"scripts": {
  "format": "onchange 'src/**/*.js' -- prettier --write {{changed}}"
}

当你想格式化的文件不止js文件时，也可以添加多个文件列表。

"scripts": {
  "format": "onchange 'test/**/*.js' 'src/**/*.js' 'src/**/*.vue' -- prettier --write {{changed}}"
}

当然，你也能够在编辑器中配置对prettier的支持，具体支持哪些编辑器，请戳这里

 

 

 

参考：

使用ESLint+Prettier来统一前端代码风格

转载于:https://www.cnblogs.com/jiaoshou/p/11271719.html