零散专题16 代码检查和格式化

EditorConfig

为了保持项目中代码缩进风格的一致，可以使用.editorconfig文件，来定义和维护一致的编码风格，例如范缩进风格，缩进大小，Tab长度以及字符集等。一般情况会覆盖IDE本身的设置，所以放在项目的根目录中，提交到代码仓库进行维护。

.editorconfig中第一行用于指明.editorconfig文件的位置，[*]表明规则应用所有文件，可以针对不同文件（比如[*.md]）添加不同的规则，再下面是具体对应的规则

下面是我在项目中尝试用的一份.editorconfig文件，

root = true

[*]
# 缩进风格：空格
indent_style = space

# 缩进大小2
indent_size = 2

# 字符集utf-8
charset = utf-8

# 除去换行行首的任意空白字符
trim_trailing_whitespace = true

# 使文件以一个空白行结尾
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

没有加入的属性几个，比如定义换行符的end_of_line，可以取值lf、cr和crlf，更详细的介绍可以参考腾讯AlloyTeam的文章。

ESLint

Eslint是一个用来识别ECMAScript并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。ESLint被设计为完全可配置的，一般使用配置文件来配置ESLint，在项目的根目录下创建.eslintrc.js

可以被配置的信息主要分为3类：

• Environments：你的Javascript脚本将要运行在什么环境（如：Node，浏览器等）中。
• Globals：执行代码时脚步需要访问的额外全局变量。
• Rules：开启某些规则，也可以设置规则的等级。

安装

安装推荐局部安装：

npm i -D eslint

安装完毕后，接下来新建一个配置文件.eslintrc.js，或者使用如下的命令行来自动生成。

./node_modules/.bin/eslint --init

# 如果是全局安装的话可以执行
eslint --init

配置文件中的配置规则分为三种等级：

• off或者0：关闭规则
• warn或者1：打开规则，并且作为一个警告
• error或者2：打开规则，并且作为一个错误

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    node: true,
  },
};

具体的配置规则非常多，具体见这里。

在Webstorm中使用

在Webstorm中配置ESLint，需要在Language & Frameworks → Javascript → Code Quality Tools → ESLint中进行配置，勾选Enable。

一般情况下下面的对应的配置和地址都会自动填好。

开启之后Webstorm就会在代码中对违反ESLint规则的代码进行高亮提示。

配合Vue项目使用

Vue Cli在创建项目时，可以选择是否启用ESLint，并且可以选择使用哪种扩展，基本上不需要自己再进行配置，但是如果需要自己手动配置时，可以自己安装eslint-plugin-vue这个插件

ESLint配置中的plugin和extend的区别是，extend提供的是ESLint现有规则的一些列预设，而plugin除了提供预设之外的自定义规则，当现有格式的代码（比如.vue）在ESLint的规则中没有对应的规则是，就需要借用插件来实现了

插件的安装有三种方式，推荐使用第一种：

vue add @vue/cli-plugin-eslint

npm install --save-dev eslint eslint-plugin-vue

yarn add -D eslint eslint-plugin-vue

对应的配置文件eslintrc.js：

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/recommended'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

规则分为Essential、Strongly Recommended和Recommended三个等级，具体的规则可以参考官网。

我在项目中使用的配置是：

// ESLint 中文文档：http://eslint.cn/docs/rules/
// eslint-plugin-vue: https://eslint.vuejs.org/
// 百度 EFE 团队使用的 eslint 配置：https://github.com/ecomfe/eslint-config/blob/master/index.js
// JavaScript 编码规范(百度): http://gitlab.baidu.com/fe/spec/blob/master/javascript.md#2-1
// Vue 组件代码规范(百度): http://gitlab.baidu.com/fe/spec/blob/master/vue.md#2-1
// iCode校验规则说明：http://bugbye.baidu.com/rules

module.exports = {
  'parser': 'vue-eslint-parser',
  'env': {
    'browser': true,
    'amd': true,
    'node': true
  },
  parserOptions: {
    'ecmaVersion': 8,
    'parser': 'babel-eslint',
    'sourceType': 'module'
  },
  'extends': ['plugin:vue/essential', ],
  'rules': {
    /* ---------------- 禁止 ---------------- */
    // 4个空格缩进
    'indent': ['error', 4, {
      'SwitchCase': 1, // switch 的 case 子句缩进4个空格
    }],
    // 只允许最大连续2行空行
    'no-multiple-empty-lines': ['error'],
    // 禁止不写分号
    'semi': ['error