使用prettier和eslint进行代码检查

pony

1、为什么要使用prettier

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

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

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

prettiereslint-plugin-prettier依赖此包,安装prettier后会在node_modules/.bin目录下生成prettier.cmd指令
@vue/eslint-config-prettier:覆盖掉eslint中与prettier相同的代码风格规则,采用prettier规则
eslint-plugin-prettiereslint-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...

阅读 1.1k
avatar
pony
前端工程师
655 声望
943 粉丝
0 条评论
你知道吗?

avatar
pony
前端工程师
655 声望
943 粉丝
宣传栏