使用prettier和eslint进行代码检查

1、为什么要使用prettier

使用ESLint配合这些规范（standardjs、airbnb），能够检测出代码中的潜在问题，提高代码质量，但是并不能完全统一代码风格，因为这些代码规范的重点并不在代码风格上（虽然有一些限制）。

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

2、eslint+Prettier使用

安装prettier、@vue/eslint-config-prettier、eslint-plugin-prettier

npm install prettier、@vue/eslint-config-prettier、eslint-plugin-prettier --save-dev

解释一下这几个包的作用：

prettier：eslint-plugin-prettier依赖此包，安装prettier后会在node_modules/.bin目录下生成prettier.cmd指令
@vue/eslint-config-prettier：覆盖掉eslint中与prettier相同的代码风格规则，采用prettier规则
eslint-plugin-prettier：eslint-plugin-prettier公开了一个 “recommended” 配置，将plugin:prettier/recommended添加到extends的子属性plugin:vue/essential之后，以默认设置在ESLint中启用对Prettier的支持

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  // @vue/prettier引入覆盖eslint规则
  extends: ['plugin:vue/essential', "plugin:prettier/recommended", '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    "prettier/prettier": "error"
  },
  plugins: [
    'vue',
    'prettier'
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
};

有两种方式提供prettier格式规则:
一、通过ESLint配置文件将选项传递给Prettier

"prettier/prettier": ["error",{"singleQuote":true,"parser":"flow"}]

二、配置.prettierrc文件，并在"prettier/prettier"配置项中指定路径

// .prettierrc
// 自定义规则
{
  "trailingComma": "es5",
  "singleQuote": true,
  "semi": false
}

然后

rules: [
    "prettier/prettier": ["error", {}, {
      "usePrettierrc": false
    }]
],

参考：
https://segmentfault.com/a/11...
https://segmentfault.com/a/11...