高效前端开发 - Visual Studio Code

时间 2019-11-08

标签高效前端开发 visual studio code 栏目 Visual Studio 繁體版

原文原文链接

本文是根据我在公司演讲（2019年8月）的高效开发主题PPT从新总结发布的一篇文章。有兴趣了解PPT的能够前往百度网盘下载：高效开发 - VSCode.pptx，提取码: yfkb。

Visual Studio Code（后面简称VSCode）已经出来有几年了，为何还要写这篇？缘由是，我以为这个编辑器强大到你不及时去了解尝试新的插件，你将没有办法时刻保持最高效的开发状态。也许本篇不少内容你已熟悉，可是我相信你依旧能从本文中受益。javascript

VSCode简介

适合本身的编辑器能改变你的工做方式和效率，若是你也在用VSCode不妨思考一下。

Q1：一个编辑器真的值得花时间来介绍吗、还能提升效率？
Q2：你的VSCode内置终端是CMD？Powershell仍是？
Q3：你了解你装的每一个插件的用途吗？
Q4：建立一个临时测试用的脚本，你会怎么操做最快速？

先看一张近几年的几款常见的IDE发展趋势css

显然VSCode日新月异，确实他在众多前端开发IDE中一直在更强大。来自官方的Slogan：“Visual Studio Code 从新定义了代码编辑”。html

我简单总结了如下几点：前端

免费、开源、多平台
智能提示，代码片断，快速补全
方便的调试能力
内置Git
丰富的插件

经常使用插件推荐

快乐程序员必备插件

做为一名快乐的前端开发工程师，必不可少的插件以下：vue

当你发现开发的乐趣大大的，效率天然提升了。咳咳咳！好了不开玩笑了。上面几款插件确实对一部分有用，但重磅推荐的是下面这些。java

实用开发插件推荐

🎉🎉🎉强烈推荐的几款插件：node

Settings Sync：用于编辑器插件、设置相关等同步到GitHub Gist的插件，当多个开发设备开发环境统一很是有用。（兴趣阅读：Visual Studio Code 设置同步到github的插件介绍及使用方法(Settings Sync)）
ESLint：用于检测JS代码规范的插件。
GitLens：查看git记录、对比git分支等强大的Git管理工具。
Vetur：Vue开发者必备。
Bracket Pair Colorizer：针对JS代码中的括号进行彩色配对。

🎉🎉比较推荐的几款插件：webpack

Better Comments：很是醒目的注释，让代码更容易阅读。
Bookmarks：打记号标签，经过快捷键快速在很长的代码中切换多个位置。
Live Server：快速启动一个本地服务器，对于编译好的静态项目能够快速访问。
Path Autocomplete：文件路径补全，超级好用。
Prettier：代码格式化工具，也还行，上手快速，配置简单。
Version Lens：针对package.json的npm包依赖进行版本检测。

其余可选插件（就不作过多的介绍了）：git

Material Theme：我的喜爱主题。
Material Icon Theme：我的喜爱ICON。
Debugger for Chrome：还能够不过大部分状况下我disabled。
Document This
Live Share：多人协做。
Visual Studio IntelliCode：微软官方的智能提示插件，可是我我的感受有时候有点智障，通常我给disable了。
Import Cost：导入npm包的体积查看。
Winter is Coming Theme：看起来还行的主题，不过我没装XD。

还有些我以为也还不错，可是基本上是disabled状态的插件，也不过多介绍了。有兴趣能够搜索一下：程序员

Quokka、carbon-now-sh或Polacode、Color Highlight、Markdown All in One、Code Runner、LeetCode、JavaScript (ES6) code snippets、Python、PlantUML等。

关于插件的补充说明

为何我强烈推荐的插件就几个，为何不少不错的插件我安装了却要disable。由于插件确实会占用编辑器的性能，装的太多极可能形成编辑器使用异常，甚至同类插件存在冲突都有可能。我在演讲PPT以前，找了公司许多前端了解了他们开发的习惯，不少开发者安装插件并不知道具体用途或者安装了用了几回就不用了。那么我给的插件安装建议以下：

明确你所用的插件用途
针对不经常使用的插件进行关闭
针对某些项目才使用的插件请在workspace启用
不要同时启用多个相似功能的插件，好比格式化代码插件

这样尽可能能保持开发环境稳定。这就是Q3的解答了，还满意吗？

编辑器设置

经常使用的快捷键，真的须要用心去学习，尽量多记一些，这不只是VSCode提高效率开发的方法，任何工具都是须要的。（如下内容Windows将command换成Ctrl便可）

command + k, command + s：经过这个组合键，多看看快捷键
command + b：侧栏展开收缩
command + j：面板（问题、输出、调试、终端面板）展开收缩
command + ,：修改设置
command + shift + p：显示全部指令，等待输入执行
command + shift + e：显示文件侧栏
command + shift + f：显示搜索侧栏
command + shift + s：显示调试侧栏
Option + command + s：所有保存
...

还有不少代码上的快捷键，包括收缩、注释、多选（多行、内容）等等，网上介绍太多了，你们有兴趣能够进一步了解。

补充说明

若是你发现某些快捷键不能用了。那必定是有其余软件占用了全局快捷键，只能慢慢排查了，我知道的Windows下有款软件能够查看系统快捷键使用状况，叫作Windows Hotkey Explorer，你们自行下载一下。（兴趣阅读：关于sublime text 3(3103)版本Ctrl+Alt+P没法正常使用解决办法）

VSCode高级设置

经过command + ,，咱们来修改编辑器的默认设置，这里我不太喜欢他的可视化设置界面，我将他切换到代码模式，手动添加以下代码：

{
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "files.associations": {
    "*.tag": "html",
    "*.css": "css",
    "*.jsp": "html",
    "*.ejs": "html",
    "*.wxml": "html",
    "*.wxss": "css"
  }
}

上面三个设置说明

分隔符去掉了–，由于Html代码中的Css类名经常使用到，若是双击不能选中完整类名，好痛苦。
命令行修改缘由？若是在Windows下开发，我没法忍受Windows的命令行或者PS须要按Ctrl + C后还要Y一下。因此换成了Git Bash，请注意你的Git安装路径进行调整。这就是Q2的解释！
其余语言的页面，须要使用HTML语法高亮配对的话，该设置能够针对不一样文件后缀的文件作相同的语言模式开发。

上面是一些简单的配置，没有配置经验的能够先试试效果。接下来会有些复杂的设置。

结合插件的配置：

不少插件都有丰富的配置项来提升成产效率，下面举几个例子。

Prettier

编码风格须要全局配置的话，你就能够尝试以下配置：

{
  "prettier.printWidth": 160,
  "prettier.singleQuote": true,
  "prettier.semi": false,
}

Path Autocomplete

项目中若是有内置文件夹映射到@，好比Nuxt、或者手动配置webpack的目录alias，那么下面这段配置很好用了：

{
  "path-autocomplete.pathMappings": {
    "@": "${folder}/client",
  }
}

那么你在Nuxt项目中输入@，就能自动映射到项目目录的client，并提示client内的文件夹了。

Vetur

若是须要配合eslint，并保存自动格式化代码能够尝试下面设置：

{
  "eslint.enable": true,
  "editor.formatOnSave": false,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "html.format.enable": false,
  "javascript.format.enable": false,
  "vetur.format.defaultFormatter.css": "prettier"
}

以上配置结合我的习惯进行调整便可。

其余技巧

该部分主要是PPT演示实操，故文章简单介绍一下。

针对开头的几个问题

JavaScript调试

自定义Launch.json
Code Runner插件解决
Debugger for Chrome插件解决

前者建议建立一个专用的测试目录做为项目目录，配置好Launch.json，例如我这里配置以下：

{
  "version": "1.0.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch file",
      "program": "${file}"
    }
  ]
}

这段配置写好后，你就能够对单个JS文件进行代码调试了。若是常常测试代码片断，那就启用Code Runner插件吧。

若是须要浏览器中的页面调试，Debugger for Chrome或者Live Server启动一个页面来调试也很方便了。

侧栏搜索进行内容查找

你或许知道对项目进行全局代码搜索，可是项目文件过多，搜索速度明显就慢了。提高搜索效率有不少方法：

默认的搜索只能看到一个输入框，也许你知道输入框左侧箭头点一下就能够实现替换功能了，而后右侧下面三个点，有更多高级的功能哦~

经过设置包含的文件或排除的文件来提高搜索效率，这里支持通配符*
经过大小写识别、精确内容搜索、正则表达式来更准确的搜索想要的内容。

快速打开项目中的文件

经过快捷键command + p，能够看到最近打开的文件，输入文件名能够很是方便的打开想要找到的文件。

快速打开项目

经过快捷键control+ r，能够快速选择须要打开最近或者想要查看的项目。

还有好多技巧其实都是离不开快捷键的，这里很少说了，你们本身多多探索。

思考及总结

认真阅读的你，我相信收获仍是很多的。对于Q1的疑问，心中也有了答案。

其实还有很是重要的一点，要不断增长本身对编辑器的熟悉程度，必定要关注每次VSCode的更新日志，虽然每次都是英文的，可能看不懂，可是尽量的过一遍，常常会有惊喜。

固然若是有兴趣，尝试本身写插件，知足个性需求也是很棒的，或者本身写snippet之类。

网络上关于VSCode相关介绍、技巧数不胜数，我仍是写了这篇文章，我也是为了推进你们更好的使用这款编辑器为目的，但愿能真正意义上提升前端开发效率。同时分享一个github仓：使人惊叹的VSCode。

最后提出一个问题：

经历了这么多年的前端开发，我经常使用的编辑器也从Frontpage -> Dreamweaver(MX...) -> Sublime Text发展到如今VSCode。那么，重度依赖VSCode真的好吗？😁😁😁