eslint使用简述

---

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有两个原因：

1. 在js执行前发现一部分的代码错误，避免小错误累积
2. 统一代码风格，让你的代码更容易被人读懂

在团队协作中，制定代码规范（为了统一代码风格）是很重要的。以前我没得选，现在...我想写个教程...

安装eslint

初学建议使用eslint --init生成配置文件，有助于你了解部分.eslintrc.(js|json)配置文件的组成。另为了方便在cmd使用eslint命令，建议全局安装。

yarn global add eslint

注意，全局安装只是为了使用eslint命令，如果你某一个工程需要eslint校验代码，请在工程目录下的package.json的devDependencies中添加eslint，以告知别人（或许也有编辑器）本项目使用eslint校验代码。

使用eslint

执行eslint --init命令后，它会询问你一些配置选择，如下所示：

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当文件改动（保存）后就自动执行校验，这样做有两点不方便：

1. 错误不太直观，需要你自己更具提示去找文件
2. 麻烦

所以一般需要配合编辑器食用！以vscode为例：

1. ctrl + shift + p输入eslint，点击安装

2. 配置保存时执行fix，可以在保存时自动修复一些小问题

   
   
   

   image.png

如果vscode版本比较低，可以在settings.json中添加"eslint.autoFixOnSave": true