我的electron教程系列
electron教程(一): electron的安裝和項目的創建
electron教程(番外篇一): 開發環境及插件, VSCode調試, ESLint + Google JavaScript Style Guide代碼規范
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.
3. 安裝VSCode的ESlint插件
在VSCode左側的Extensions中搜索ESlint，安裝ESlint, 如下圖:
4. 重啟VSCode生效
VSCode插件推薦
1. vscode-icon
整個插件可以改變不同格式文件的圖標.
如下圖所示, .js, .html, .json等文件, 使用了不同的圖標:
在VSCode左側的Extensions中搜索vscode-icons ，安裝vscode-icons, 如下圖:
