使用eslint与prettier自动规范代码

prettier:

支持：js、jsx、css等
缺陷：不能格式化vue模板文件中的template

eslint：

需要有 eslintrc.js 配置文件

借助ESLint的autofix功能，在保存代码的时候，自动将抛出error的地方进行fix。

prettier：

• 安装prettier： npm i -D prettier
• 安装关联插件： npm i -D eslint-plugin-prettier

eslint-plugin-prettier作用：会调用prettier对代码风格进行检查。
① 先使用prettier对代码格式化
② 然后与格式化之前的代码进行对比，如果不一致，这个地方就会被prettier进行标记

• 抛出错误：在 .eslintrc.js 的 rules 中添加 "prettier/prettier": "error"，表示被prettier标记的地方抛出错误。

不同eslint启动方式，配置保存时自动格式化

• 在webpack中引入eslint-loader来启动的

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [path.join(__dirname, 'src')],
        options: {
          fix: true
        }
      }
    ]
}

• 直接通过cli方式启动的

只需要在后面加上fix即可，如：eslint --fix。

• 没有启动eslint

① 可以通过 onchange 进行代码的监听， npm install 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进行配置

三种方式：

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", //是否使用尾逗号，有三个可选值""
  "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")。