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.