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

{
  "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.

3. 安装VSCode的ESlint插件

在VSCode左侧的Extensions中搜索ESlint，安装ESlint, 以下图:

4. 重启VSCode生效

VSCode插件推荐

1. vscode-icon

整个插件能够改变不一样格式文件的图标.

以下图所示, .js, .html, .json等文件, 使用了不一样的图标:

在VSCode左侧的Extensions中搜索vscode-icons，安装vscode-icons, 以下图: