使用 eslint + prettier 来规范前端代码 (包括VsCode配置)

3,108 阅读2分钟

一、介绍

1. eslint

eslint是最流行的 JavaScript Linter。作用是检查代码错误,规范代码风格。

它主要包含三个功能:

(1) check syntax

(2) find problems

这两个功能可以统称为 Code-quality rules代码质量,检查错误

(3) enforce code style

最后一个可以称为 Formatting rules代码风格

2. prettier

Prettier于2017年由James Long发布,其灵感来自refmt工具,该工具与Facebook的Reason项目一起使用,该项目利用OCaml的语法与JavaScript协调工作。

prettier只是一个Formatting rules, 只负责规范代码风格。

选择 eslint + prettier ,就是把 eslint的上述第三个功能 enforce code style部分用prettier取代。

为什么选择 prettier ?

(1) 代码规范比 ESLint 的 Airbnb、Standard 更好更先进。

(2) prettier 是一个 Opinionated 的代码格式化工具。比 ESLint 提供更少的代码风格规则配置项,终极目的是结束关于代码风格的争论。

二、配置

1. 配置文件

以Vue项目为例

在使用Vue-Cli构建项目时,选择 eslint + prettier。

项目根目录存在 .eslintrc.js 文件,为eslint配置文件。代码如下

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

在项目根目录建立 .prettierrc 文件,作为prettier配置文件,键入以下代码。官方文档配置项

{
  "semi": false, // 取消分号
  "singleQuote": true // 使用单引号
}

代码 lint 规则即配置完成。

2. VsCode配置

在使用VsCode作为编辑器时,我们可以通过配置 settings.json 来实现保存时自动修复代码。

下面贴上个人VsCode配置 (必要插件ESlint Vetur Prettier-Code formatter

插件 ESlint 和 Prettier-Code formatter 会读取目录下各自的配置文件。避免了编辑器格式化和Eslint自动修复冲突。

  • 使用vetur来格式化.vue文件,css预处理为stylus
  • 其它类型文件格式化交给prettier插件
{
  // 保存时编辑器自动格式化代码
  "editor.formatOnSave": true,
  // eslint配置项,保存时自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // 默认使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 指定 *.vue 文件的格式化工具为vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "vetur.format.defaultFormatter.html": "prettier",
  // 以下为stylus格式化配置
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
}

这样,就实现了项目中使用 eslint + prettier 来统一代码。