1. 安装 Node.js
下载链接:https://npm.taobao.org/mirrors/node/v8.9.3/node-v8.9.3-x64.msi
2. 安装 VSCode
注意:安装过程中最好勾选
- 将“通过 Code 打开”操作添加到 Windows 资源管理器文件上下文菜单
- 将“通过 Code 打开”操作添加到 Windows 资源管理器目录上下文菜单
- 将 Code 注册为受支持的文件类型的编辑器
3. 配置 NPM
3.1 NPM介绍
(1)安装 Node.js 时会捆绑安装 npm。
(2)npm 是一个包管理工具,常用场景:
允许用户从 NPM 服务器下载别人编写的第三方包到本地使用;
允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用;
允许用户将自己编写的包或命令行程序长传到 NPM 服务器供别人使用
3.2 全局安装与本地安装的介绍
- 如果项目需要依赖特定的模块(例如 Node.js 中需要 require 引入的额外模块),应当将模块安装在项目目录下(也就是本地安装),这也是 npm 的默认安装模式。
- 如果想将一个软件包作为一个命令行工具(例如接下来将要介绍到的 ESLint 工具),则需要将它安装在全局范围内(这样可以在不同的项目中使用,防止在每个项目中需要重新安装)。
- npm install <package_name>:本地安装特定的软件包,它将会在你项目的根目录下创建一个 node_modules 目录,并将软件包和该软件包所依赖的软件包放入该目录下。
- npm install <package_name> -g:全局安装特定的软件包,它将会在你全局安装的默认路径下载你所安装的软件包,这个目录也会被添加到环境变量,所以你可以在命令行下使用全局安装的软件包。
3.3 测试运行 npm
npm –v:查看是否成功安装 npm,并查看 npm 的版本
3.4 配置 npm 的代理服务器
npm config set proxy <proxy>:设置 npm 下载资源时所使用的代理服务器,<proxy> 为代理服务器的 URL,格式为 (<protocol>//<username>:<password>@<hostname>:<port>)
3.5 配置 npm 的下载服务器的镜像
npm config set registry <url>:因为 npm 包管理的服务器在国外,所以国内访问的速度会很慢,可以使用国内的镜像服务器来加快下载速度(例如可以使用淘宝的镜像服务器 npm config set registry http://registry.npm.taobao.org/)
3.6 检查代理服务器和镜像服务器是否配置成功
- npm config get proxy:检查代理服务器是否为所配置
- npm config get registry:检查镜像服务器是否为所配置
4. 配置 ESLint
4.1 全局安装指定版本的 ESLint
npm install –g eslint@4.18.2
4.2 安装 VSCode ESLint 插件
- 点击 VSCode 左侧活动栏扩展图标(也可以使用快捷键 Ctrl+Shift+X)
- 搜索 “ESLint”关键字,并安装该插件
4.3 绑定 ESLint 自动格式化代码快捷键
- 文件 -> 首选项 –> 键盘快捷方式(也可以使用快捷键 Ctrl+K, Ctrl+S)
- 点击搜索框下方的 keybindings.json
- 在右侧展开的 keybindings.json 文件中,添加一个对象到数组末尾
- { “key”: “shift+alt+f”, “command”: “eslint.executeAutofix” }
- 该对象表示将 “shift+alt+f” 快捷键绑定到 “eslint.executeAutofix”命令上,该命令会使用 ESLint 自动格式化代码
5. 配置VSCode
5.1 配置主题
- 文件 -> 首选项 -> 颜色主题(也可以使用快捷键 Ctrl+K, Ctrl+T)
- 推荐使用 MonoKai 颜色主题
5.2 配置文件图标主题
1.文件 -> 首选项 -> 文件图标主题;
2.推荐下载 vscode-icons 插件,并使用它作为文件图标主题
5.3 配置编辑器
- 文件 -> 首选项 -> 设置
- 在右侧的用户设置区可以自定义 VSCode 的所有配置,例如
- “editor.tabSize”: 2, // 设置编辑器的代码缩进大小(强制要求)
- “editor.fontFamily”: “Consolas, ‘微软雅黑’”, // 设置编辑器的字体类型(不强制要求)
6. 使用 ESLint 检查/格式化代码
6.1 将项目用 VSCode 打开,有多种方式
- 如果在 VSCode 安装过程中勾选了“…添加上下文菜单…”,便可通过在项目目录右键,选择 Open Width Code
- 可以先运行 VSCode(双击打开,或通过命令行 code),将项目目录拖动到 VScode IDE 中
- 可以在打开 VSCode 后,选择 文件 -> 打开文件夹,然后选择想要打开的项目目录
6.2 添加 ESLint 配置文件
- 在需要进行代码检查的目录下添加 .eslintrc.js 文件,这个目录可以不是项目的根目录
6.3 生成代码检查结果
eslint –f html –o eslint-log.html <name>
其中,<name> 为想要检查的目录或文件