概述

工欲善其事必先利其器，现在前端开发的同学基本上都是人手vscode，主要是因为生态比较好，再加上软件本身非常好用。

在团队合作中，代码的规范重要性不言而喻，纯靠约定是不够的，需要借助现有的工具来帮助我们完成这一目的，首先最理想的就是Eslint了。

Eslint有非常多的代码规则，可以根据大家的编码习惯进行自定义配置，总体上规则可以分为两大类，能自动fix的和不能fix的。我们需要安装vscode的eslint插件主要是两个目的，第一是将能自动fix的代码进行fix，第二是对不能自动fix的标记出来，需要手动去根据规则修改。

安装

首先需要Vscode已经被安装，没有安装的同学可以点这里进行下载。

然后是安装vscode eslint插件

按照图上步骤，然后点击安装即可。

安装好后，需要查看eslint是否运行成功，包括后面改了eslint规则后，vscode的eslint插件都应该会自己重启的，按照下图步骤打开eslint插件的控制台查看输出信息

当出现下列信息的时候说明eslint运行成功了。

出现下列信息说明eslint没有找到对应的配置文件。

eslint常用的配置文件为项目根目录下的，.eslintrc 开头的，可以是没有后缀名的，可以是 .js .json .yaml 为后缀名的，不同后缀名对应不同的语法，还可以直接在package.json文件里面一把唆。

当你全局安装eslint之后，即npm install -g eslint之后，输入eslint --init即可开启一个官方的配置指导脚手架，帮你自动生成对应你选项的简单的eslint规则，还可以帮你安装插件，可谓非常贴心。