VSCode + ESLint配置

1. 安装 Node.js

下载链接：https://npm.taobao.org/mirrors/node/v8.9.3/node-v8.9.3-x64.msi

2. 安装 VSCode

下载链接：https://vscode.cdn.azure.cn/stable/79b44aa704ce542d8ca4a3cc44cfca566e7720f1/VSCodeSetup-x64-1.21.1.exe

注意：安装过程中最好勾选

1. 将“通过 Code 打开”操作添加到 Windows 资源管理器文件上下文菜单
2. 将“通过 Code 打开”操作添加到 Windows 资源管理器目录上下文菜单
3. 将 Code 注册为受支持的文件类型的编辑器

3. 配置 NPM

 3.1 NPM介绍

   （1）安装 Node.js 时会捆绑安装 npm。

   （2）npm 是一个包管理工具，常用场景：

    允许用户从 NPM 服务器下载别人编写的第三方包到本地使用；

   允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用；

   允许用户将自己编写的包或命令行程序长传到 NPM 服务器供别人使用

3.2 全局安装与本地安装的介绍

1. 如果项目需要依赖特定的模块（例如 Node.js 中需要 require 引入的额外模块），应当将模块安装在项目目录下（也就是本地安装），这也是 npm 的默认安装模式。
2. 如果想将一个软件包作为一个命令行工具（例如接下来将要介绍到的 ESLint 工具），则需要将它安装在全局范围内（这样可以在不同的项目中使用，防止在每个项目中需要重新安装）。
3. npm install ：本地安装特定的软件包，它将会在你项目的根目录下创建一个 node_modules 目录，并将软件包和该软件包所依赖的软件包放入该目录下。
4. npm install -g：全局安装特定的软件包，它将会在你全局安装的默认路径下载你所安装的软件包，这个目录也会被添加到环境变量，所以你可以在命令行下使用全局安装的软件包。

3.3  测试运行 npm

    npm –v：查看是否成功安装 npm，并查看 npm 的版本

3.4 配置 npm 的代理服务器

npm config set proxy ：设置 npm 下载资源时所使用的代理服务器， 为代理服务器的 URL，格式为 （//:@:）

3.5 配置 npm 的下载服务器的镜像

npm config set registry ：因为 npm 包管理的服务器在国外，所以国内访问的速度会很慢，可以使用国内的镜像服务器来加快下载速度（例如可以使用淘宝的镜像服务器 npm config set registry http://registry.npm.taobao.org/）

3.6 检查代理服务器和镜像服务器是否配置成功

1. npm config get proxy：检查代理服务器是否为所配置
2. npm config get registry：检查镜像服务器是否为所配置

4. 配置 ESLint

4.1 全局安装指定版本的 ESLint

    npm install –g [email protected]

4.2 安装 VSCode ESLint 插件

1. 点击 VSCode 左侧活动栏扩展图标（也可以使用快捷键 Ctrl+Shift+X）
2. 搜索 “ESLint”关键字，并安装该插件

 4.3 绑定 ESLint 自动格式化代码快捷键

1. 文件 -> 首选项 –> 键盘快捷方式（也可以使用快捷键 Ctrl+K, Ctrl+S）
2. 点击搜索框下方的 keybindings.json
3. 在右侧展开的 keybindings.json 文件中，添加一个对象到数组末尾
4. { “key”: “shift+alt+f”, “command”: “eslint.executeAutofix” }
5. 该对象表示将 “shift+alt+f” 快捷键绑定到 “eslint.executeAutofix”命令上，该命令会使用 ESLint 自动格式化代码

5. 配置VSCode

5.1 配置主题

1. 文件 -> 首选项 -> 颜色主题（也可以使用快捷键 Ctrl+K, Ctrl+T）
2. 推荐使用 MonoKai 颜色主题

5.2 配置文件图标主题

    1.文件 -> 首选项 -> 文件图标主题;

    2.推荐下载 vscode-icons 插件，并使用它作为文件图标主题

 5.3 配置编辑器

1. 文件 -> 首选项 -> 设置
2. 在右侧的用户设置区可以自定义 VSCode 的所有配置，例如
   1. “editor.tabSize”: 2, // 设置编辑器的代码缩进大小（强制要求）
   2. “editor.fontFamily”: “Consolas, ‘微软雅黑’”, // 设置编辑器的字体类型（不强制要求）

6. 使用 ESLint 检查/格式化代码

6.1 将项目用 VSCode 打开，有多种方式

1. 如果在 VSCode 安装过程中勾选了“…添加上下文菜单…”，便可通过在项目目录右键，选择 Open Width Code
2. 可以先运行 VSCode（双击打开，或通过命令行 code），将项目目录拖动到 VScode IDE 中
3. 可以在打开 VSCode 后，选择 文件 -> 打开文件夹，然后选择想要打开的项目目录

 6.2 添加 ESLint 配置文件

1. 在需要进行代码检查的目录下添加 .eslintrc.js 文件，这个目录可以不是项目的根目录

6.3 生成代码检查结果

 eslint –f html –o eslint-log.html  

其中， 为想要检查的目录或文件