引言
这一篇将介绍:
1. 如何部署开发环境 VSCode .
2. 如何使用vscode调试启动项目.
3. 如何使用 ESLint 插件来检查代码, 代码风格规范使用 Google JavaScript Style Guide ( 官方英文 , 第三方中文翻译 ).
4. VSCode插件推荐.
安装VSCode
通过 VSCode官网 下载, 可以安装在任意盘符下任意位置.
安装完成后, 就可以使用VSCode打开并编辑 main.js 了.
你还可以使用VSCode打开并编辑 .html , .json 等文件, 甚至是 .txt , .md 等文件.
使用VSCode调试启动项目
1. 部署node.js+electron环境
按步骤完成 electron教程(一): electron的安装和项目的创建 所介绍的内容.
2. 创建launch配置文件
在项目根目录, 建立 .vscode 目录, 在该文件夹内创建 launch.json 文件,内容如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron JS",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"program": "${workspaceFolder}/src/main.js",
"protocol": "inspector"
},
]
}
|
3. 将你的项目复制进VSCode
现在, 启动一个VSCode.
然后, 将整个项目文件夹 blogs , 拖动到VSCode的主窗口中, 可以看到, 鼠标位置显示出 复制
松开鼠标, 复制完成, VSCode界面左边出现 blogs 目录, 可以直接打开该目录下任意文件
4. 调试!
在 main.js 中打一个断点, 然后按下 F5 , 就会进入断点调试, 一路执行下去, 最终依然会出现 electron 程序界面.
安装ESLint代码检查工具, Google JavaScript Style Guide
ESLint是一个语法规则和编码规范的检查工具, 它有两个功能:
功能一:
由于JavaScript是动态弱类型语言, 编译器无法进行代码检查(比如类型错误), 以往都需要执行JavaScript代码才能发现语法错误或其他错误. 而ESLint, 可以在我们写代码的时候就提示出语法错误, 对开发人员非常有帮助.
功能二:
ESLint可以导入编码规范, 强制代码符合某种规范, 常见的有: Google开源的JavaScript代码风格规范 Google JavaScript Style Guide , 由很多前端开发人员总结的 eslint-config-standard , Airbnb 开源的的规范.
你可以在上述开源规范上, 做一些自己喜欢的修改, 如果你愿意, 甚至可以自己写一套规范.
1. 安装ESLint
在项目根目录, 执行指令:
npm install --save eslint eslint-config-google
|
2. 修改配置文件
在项目根目录创建 .eslintrc.js 文件，将下列内容复制到文件中:
module.exports = {
"extends": ["google"],
"parserOptions": {
"ecmaVersion": 2018
},
"env": {
"es6": true
},
rules: {
"linebreak-style": ["error","windows"],
}
};
|
上面的配置文件, 主要有以下内容:
1. extends 指定了使用 google 编码规范.
2. parserOptions 指定ECMAScript支持的版本， 2018 指ES2018
3. env 为环境变量, 可以预设好的其他环境的全局变量，如brower环境变量, node环境变量, es6环境变量, mocha环境变量等.
4. rules 可以添加一些自己的规则, 这些规则会覆盖掉extends中指定的规范. 在这里我指定了 linebreak-style 使用windows风格换行符 CRLF , 而不是Google Style默认的Unix风格换行符 LF .
3. 安装VSCode的ESlint插件
在VSCode左侧的 Extensions 中搜索 ESlint ，安装 ESlint
4. 重启VSCode生效
VSCode插件推荐
1. vscode-icon
整个插件可以改变不同格式文件的图标.
如下图所示, .js , .html , .json 等文件, 使用了不同的图标
在VSCode左侧的 Extensions 中搜索 vscode-icons ，安装 vscode-icons |
