title: eslint使用简述
tags: [eslint, vscode]
date: 2019-02-03
前言
本文主要讲使用eslint来规范前端代码，编辑器使用vscode。
首次接触eslint，是因为使用了vue-cli
什么是eslint
ESLint是一个开源的javascript代码检测工具，由Nicholas C. Zakas 于2013年6月创建。它提供一系列可配置规则，并依据这些规则校验你的javascript代码，如有不合法则给你提示（依据你对规则的设置，报错或者警告）。
为什么需要eslint
javascript是一门动态类型 + 弱类型语言，它很灵活但也更容易出错。使用eslint有两个原因：
- 在js执行前发现一部分的代码错误，避免小错误累积
- 统一代码风格，让你的代码更容易被人读懂
在团队协作中，制定代码规范（为了统一代码风格）是很重要的。以前我没得选，现在...我想写个教程...
安装eslint
初学建议使用eslint --init生成配置文件，有助于你了解部分.eslintrc.(js|json)配置文件的组成。另为了方便在cmd使用eslint命令，建议全局安装。
yarn global add eslint
注意，全局安装只是为了使用eslint命令，如果你某一个工程需要eslint校验代码，请在工程目录下的package.json的devDependencies中添加eslint，以告知别人（或许也有编辑器）本项目使用eslint校验代码。
使用eslint
执行eslint --init命令后，它会询问你一些配置选择，如下所示：
如上配置生成的
.eslintrc.js文件内容是这样：
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2015,
"sourceType": "module"
},
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
}
};
配合编辑器（vscode）使用
如果不配合编辑器使用，你可能需要命令行eslint [file]去校验，或则像vue-cli的dev-server当文件改动（保存）后就自动执行校验，这样做有两点不方便：
- 错误不太直观，需要你自己更具提示去找文件
- 麻烦
所以一般需要配合编辑器食用！以vscode为例：
-
ctrl + shift + p输入eslint，点击安装 -
配置保存时执行fix，可以在保存时自动修复一些小问题
image.png
如果vscode版本比较低，可以在settings.json中添加
"eslint.autoFixOnSave": true
