ESLint自动格式化代码

ESLint是干什么的

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似。

ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

而ESlint重点并不在于对代码的格式化，而在于语法规则的校验与修复。

安装ESLint

Node.js版本 >=6.14, npm 版本 3+。

安装指令

ESlint 作为一个代码格式化工具，当然只在开发过程中使用。

javascript 复制代码

// npm
npm install eslint --save-dev
// yarn
yarn add -D eslint

初始化ESLint
如果你已经有一个完整的项目结构，那么可以跳过此步骤，如果你是从零开始，那么建议你先初始化一个项目，生成package.json文件，用来管理项目的第三方依赖。

初始化项目，执行命令 npm init -y

生成一个package.json文件，如：

javascript 复制代码

{
  "name": "eslint",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

接下来生成ESLint的配置文件，用来便捷的管理你的ESLint规则，指令：

javascript 复制代码

./node_modules/.bin/eslint --init
// 或者你也可以这样，使用npx命令，更便捷
npx eslint --init

初始化生成配置文件时，需要选择很多东西，详情如下：

javascript 复制代码

// 空格键 选中/取消   Enter键确认选择
 
? How would you like to use ESLint? (Use arrow keys) //您想如何使用ESLint
  To check syntax only // 只检查语法
> To check syntax and find problems // 检查语法和发现问题
  To check syntax, find problems, and enforce code style // 检查语法、发现问题并实施代码样式
 
? What type of modules does your project use? (Use arrow keys) //您的项目使用什么类型的模块
> JavaScript modules (import/export) // JavaScript模块
  CommonJS (require/exports) // CommonJS
  None of these // 其他
 
? Which framework does your project use? (Use arrow keys) //您的项目使用哪个框架(根据情况选择)
> React
  Vue.js
  None of these
 
? Does your project use TypeScript? (y/N) 
//项目是否使用TypeScript,后面括号中大写字母表示默认选项，如果不想使用，直接回车
 
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert sel
ection) //您的代码在哪里运行
>(*) Browser // 浏览器
 (*) Node // node
 
? What format do you want your config file to be in? (Use arrow keys) //您希望生成的配置文件是什么格式的
> JavaScript
  YAML
  JSON
 
The config that you've selected requires the following dependencies: //您选择的配置需要以下依赖，
eslint-plugin-vue@latest
? Would you like to install them now with npm? (Y/n) //您想现在安装它吗,默认yes，安装的话直接回车，不安装输入n

配置完成之后就会生成ESLint配置文件，.eslintrc.js文件，如下

javascript 复制代码

module.exports = {
    // 指定脚本的运行环境， env 关键字指定你想启用的环境，并设置它们为 true
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    // 扩展配置文件（设置当前ESLint默认继承的规则（或者你也可以使用标准规则：standard））
    // 一个配置文件一旦扩展，就可以继承另一个配置文件的所有特征（包括规则、插件和语言选项）、并修改所有选项
    "extends": [
        "eslint:recommended",// 使用ESLint推荐的规则
        "plugin:vue/essential"
    ],
    "globals": { //  脚本在执行期间访问的额外的全局变量
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    // 解析器选项。sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
    "parserOptions": { 
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    // 使用的插件，插件名称省略了eslint-plugin-
    "plugins": [
        "vue"
    ],
    // 启用的规则及其各自的错误级别(在这里配置规则)
    "rules": {
    }
};

到这里，ESLint的初始化安装配置就已经完成，接下来就需要配置具体的规则了，如果你有什么不明白的，推荐你查阅ESLint官方的配置文档，了解详细配置。

或者你觉得看文档比较繁琐，那么推荐查看：ESlint配置文件eslintrc.js详解。

在项目中使用ESLint

当你配置好了这一切的东西，配置好了.eslintrc.js 文件，配置好了你想要的规则，那么怎么让你的代码按照自己配置的规则进行格式化呢，这里是重点:

**第一种，**配置命令行方式执行

在 package.json 文件中的 script 对象中添加如下命令：

javascript 复制代码

"eslint": "eslint --ext .js,.vue src --fix",

这种方式的使用需要执行你自己配置的 eslint 命令，开始代码格式化，你需要运行如下命令：

javascript 复制代码

npm run eslint

npm run 后面跟的是你配置的格式化命令的名称。

**第二种，**配置vscode 保存自动格式化代码：

首先应该在 vscode 应用商店搜索 eslint 插件，并安装，因为当前这种使用方式依赖于vscode 提供的 eslint 插件，详情请看 VS Code ESLint，如果你已经安装，请跳过。

接下来需要修改vscode 中 settings.json 文件配置，如下：

javascript 复制代码

// 保存时修复来自所有插件的所有可自动修复的ESlint错误（重点其实只有这一个）
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
// 在快速修复菜单中显示打开的 lint 规则文档网页
"eslint.codeAction.showDocumentation": {
  "enable": true
},

setting.json文件打开方式：vscode编辑器左下角设置 =》 settings（设置） =》右上角第一个按钮（编辑器窗口放大缩小按钮下方）

配置完成，接下来当你 ctrl + s 保存代码的时候会自动按照你配置的规则来格式化代码。

使用插件

1，eslint-plugin-vue插件

eslint-plugin-vue 是Vue.js 的官方 ESLint 插件，这个插件允许我们用 ESLint 检查 .Vue 文件的和

具体安装使用参见：eslint-plugin-vue 插件官方文档。

该插件与 vscode 编辑器集成，当你使用 VSCode 编辑器进行代码开发，你可以安装 VSCode 相关 ESLint 的扩展插件 ESLint，该插件在VS Code中集成了ESLint，请在 vscode 扩展商店搜索 eslint 安装。

你必须配置 eslint.validate 扩展程序的选项来检查 .vue 文件，因为扩展程序默认仅针对 .js 或.jsx 文件。

在 vscode settings.json 文件中设置：

javascript 复制代码

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

更多VS Code ESLint 扩展配置请看官方文档：VS Code ESLint 官方扩展配置。

如果您使用 vscode 编辑器开发 vue，因为 Vetur 是 vscode 的 vue 工具，如果你使用 ESLint 校验，请设置"vetur.validation.template": false ，避免默认 Vetur 模板验证，详情请参考：

关于 vetur 的设置： Linting / Error Checking | Vetur。

若拿了别人代码，不想自动化。可以在config.js中：

javascript 复制代码

useEslint: false