我的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-standardAirbnb开源的的规范.

你可以在上述开源规范上, 做一些自己喜欢的修改, 如果你愿意, 甚至可以自己写一套规范.

 

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代码规范的更多相关文章

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

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...

  2. 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV

    这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...

  3. C++雾中风景番外篇3:GDB与Valgrind ,调试代码内存的工具

    写 C++的同学想必有太多和内存打交道的血泪经验了,常常被 C++的内存问题搅的焦头烂额.(写 core 的经验了)有很多同学一见到 core 就两眼一抹黑,不知所措了.笔者 入"坑&quo ...

  4. 【番外篇】Rust环境搭建+基础开发入门+Rust与.NET6、C++的基础运算性能比较

    前言:突然想打算把Rust作为将来自己主要的副编程语言.当然,主语言还是C#,毕竟.NET平台这么强大,写起来就是爽.缘起:之前打算一些新的产品或者新的要开发的东西,由于没有历史包袱,就想重新选型一下 ...

  5. 《30天自制操作系统》学习笔记--番外篇之Mac环境下的工具介绍

    这几天又有点不务正业了,书也没看,一直在搞这个破环境,尝试各种做法,网上各种垃圾信息,浪费了很多时间,说的基本都是废话,不过还是找到了一些,赶紧写下来,不然这个过几天又忘了 首先是环境,我用的是Max ...

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

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...

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

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...

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

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...

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

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 子进程管理 electron教程(三): ...

随机推荐

  1. Laravel报错Call to undefined function Illuminate\Encryption\openssl_cipher_iv_length()

    nginx: 在phpstudy中运行Laravel一键安装包时报错:Call to undefined function Illuminate\Encryption\openssl_cipher_i ...

  2. H3C 三种生成树协议的端口状态对比

  3. 土旦:移动端 Vue+Vant 的Uploader 实现 :上传、压缩、旋转图片

    面向百度开发 html <van-uploader :after-read="onRead" accept="image/*"> <img s ...

  4. 使用Glide加载圆角图片

    //设置图片圆角角度 RoundedCorners roundedCorners= new RoundedCorners(6); //通过RequestOptions扩展功能,override采样率, ...

  5. slim中返回结果加密的

    //返回结果不加密 $this->get("/open]",function (Request $request, Response $response, $args) {  ...

  6. VRChat之转移地图缓存

    我的电脑是win10,win10的缓存地址和名称可能和win7的名字有所不同. win10缓存路径:C:\Users\Administrator\AppData\LocalLow\VRChat\VRC ...

  7. 第二阶段:2.商业需求文档MRD:2.MRD-目标市场分析

    版本管理的变更人,属性,时间以及审核人都要严格的写清楚. MRD主要面向的是参与这个需求同级别的同时或主管,让大家更好的了解这个产品的各个方面,达成共识. 现在互联网的发展周期很短,不需要看4.5年, ...

  8. Redis 都有哪些数据类型?分别在哪些场景下使用比较合适?

    redis 主要有以下几种数据类型: string hash list set sorted set string 这是最简单的类型,就是普通的 set 和 get,做简单的 KV 缓存. set c ...

  9. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...

  10. no supported authentication methods avaiable

    在git(小乌龟)向github远程推送(push)文件是会报一个异常 no supported authentication methods avaiable 解决方法:因为git(小乌龟)和Git ...