electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

我的electron教程系列

electron教程(一): electron的安装和项目的创建

electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint

electron教程(二): http服务器, ws服务器, 子进程管理

electron教程(三): 使用ffi-napi引入C++的dll

electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)

引言

这一篇将介绍:

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", // 配置方案名字, VSCode左下角可以切换配置方案 "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", "program": "${workspaceFolder}/src/main.js", // electron入口 "protocol": "inspector" // 默认的协议是legacy，该协议导致不进入断点 }, ] }

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.