electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范
我的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
, 如下图:
electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范的更多相关文章
- electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...
- 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV
这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...
- C++雾中风景番外篇3:GDB与Valgrind ,调试代码内存的工具
写 C++的同学想必有太多和内存打交道的血泪经验了,常常被 C++的内存问题搅的焦头烂额.(写 core 的经验了)有很多同学一见到 core 就两眼一抹黑,不知所措了.笔者 入"坑&quo ...
- 【番外篇】Rust环境搭建+基础开发入门+Rust与.NET6、C++的基础运算性能比较
前言:突然想打算把Rust作为将来自己主要的副编程语言.当然,主语言还是C#,毕竟.NET平台这么强大,写起来就是爽.缘起:之前打算一些新的产品或者新的要开发的东西,由于没有历史包袱,就想重新选型一下 ...
- 《30天自制操作系统》学习笔记--番外篇之Mac环境下的工具介绍
这几天又有点不务正业了,书也没看,一直在搞这个破环境,尝试各种做法,网上各种垃圾信息,浪费了很多时间,说的基本都是废话,不过还是找到了一些,赶紧写下来,不然这个过几天又忘了 首先是环境,我用的是Max ...
- electron教程(三): 使用ffi-napi引入C++的dll
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...
- electron教程(一): electron的安装和项目的创建
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...
- electron教程(二): http服务器, ws服务器, 进程管理
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...
- electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 子进程管理 electron教程(三): ...
随机推荐
- Tomcat最佳线程数
什么是最佳线程数? 为满足更多用户访问需求,可以调整Tomcat线程数,但是不能太大,否则导致线程切换开销,随着用户递增(线程数也随之调整),系统QPS逐渐增加,当用户量达到某个值,QPS并不会增加, ...
- dijkstra堆优化(multiset实现->大大减小代码量)
例题: Time Limit: 1 second Memory Limit: 128 MB [问题描述] 在电视时代,没有多少人观看戏剧表演.Malidinesia古董喜剧演员意识到这一事实,他们想宣 ...
- H3C查看文件内容
<H3C>more logfile.log 创建一个目录 <H3C>mkdir gaochengwang 重命名目录及文件 <H3C>rename wnt 0904 ...
- Java并发编程(您不知道的线程池操作), 最受欢迎的 8 位 Java 大师,Java并发包中的同步队列SynchronousQueue实现原理
Java_并发编程培训 java并发程序设计教程 JUC Exchanger 一.概述 Exchanger 可以在对中对元素进行配对和交换的线程的同步点.每个线程将条目上的某个方法呈现给 exchan ...
- es6笔记 day2---字符串模板及字符串新增
字符串连接案例 注意:引号变了,为键盘数字1旁边的飘花键 以前的老写法是在字符串中加入“+”号,给几个字符串给串起来,那种写法是要死人的. 现在只需加上一对``即可将字符串连接起来 --------- ...
- PowerShell 通过 WMI 获取系统服务
本文告诉大家如何通过 WMI 获取系统服务 通过 Win32_Service 可以获取系统启动的服务 Get-WmiObject Win32_Service | Format-List Caption ...
- vue-learning:12 - 2 - 区分:outerHTML - innerTHML - outerText - innerText - textContent
区分:outerHTML - innerTHML - outerText - innerText - textContent 获取值 <div id="outer"> ...
- 运用NodeJs环境并依赖第三方库,框架等实现网站前后端分离报错问题及处理方法
运用NodeJs环境并依赖第三方库,框架等实现网站前后端分离报错问题及处理方法 问题一: SyntaxError: missing ) after argument list in .....\vie ...
- C++Review3_关于C++各种概念的串联与梳理
经过前面两个Review,对代码复用,类的继承概念有了进一步理解. 这里再做一次复盘,把其他概念也串联起来构成一个知识框架. 首先是类和对象的概念.对象指的是特征与技能的结合体,面向对象编程思想的好处 ...
- DOCKER学习_003:Docker的存储
一 简介 docker提供数据卷来实现数据共享与持久化,而数据卷的挂载有两种方式: 挂载主机目录(Bind mounts) 数据卷容器(Data Volumes) 数据卷是一个可供容器使用的特殊目录, ...