js json编辑器_程序员必备编辑器 —— Visual Studio Code

前言

我刚入行Web前端的时候，我先后使用过Notepad++、Sublime Text、 Hbuilder IDE、Webstorm进行Web前端开发，偶然的机会了解到Atom、Visual Studio Code等跨平台编辑器，也用了一段时间，觉得不习惯使用界面，又换回使用Hbuilder。后来研究Vuejs的时候才开始使用Visual Studio Code，原因是Hbuilder那时对Vuejs支持程度不是很好，插件很少。我是2017年开始从Hbuilder IDE迁移到Visual Studio Code上进行Web前端开发，那时没见Visual Studio Code很流行，时至今日，Visual Studio Code已经成为当前最热门的文本编辑器。

---

特点

优点

• 开源免费。
• 跨平台。
• 简单易上手。
• 可扩展，插件丰富。
• 运行速度快。
• 良好的集成终端与Git版本控制。

缺点

• 基于Electron技术，启动速度相对Sublime Text、Notepad++慢一点点。
• 查找特定的函数定义偏弱，需要手动配置。
• 代码重构能力偏弱。

---

常用快捷键

快速打开终端

Ctrl + ` （Windows）

Command + `（Mac OS）

代码格式化

Shift + Alt + F （Windows）

Shift + Option + F（Mac OS）

行注释

Ctrl + /（Windows）

Command + /（Mac OS）

块注释

Shift + Alt + A （Windows）

Shift + Option + A（Mac OS）

折叠所有块注释

Ctrl + K，再按Ctrl + / （Windows）

Command + /，再按Command + /（Mac OS）

跳转定义

F12

打开编辑器命令

F1

批量修改方法名与变量

F2

跳转到某一行

Ctrl + G （Windows）

Command + G（Mac OS）

删除某一行

Ctrl + Shift+ K （Windows）

Command + Shift+ K （Mac OS）

快速打开文件

Ctrl + P （Windows）

Command + P（Mac OS）

移动代码位置

Alt + ↑ / ↓ （Windows）

Option + ↑ / ↓ （Mac OS）

合并行

Ctrl + J （Windows）

Command + J （Mac OS）

编辑器默认没有设置快捷键，需要自定义快捷键。

英文大小写转换

Ctrl+ Alt + U（Windows）

Command + Option + L （Mac OS）

编辑器默认没有设置快捷键，需要自定义快捷键。

延伸：

快捷键列表查看

Ctrl + K，再按Ctrl + S （Windows）

Command + K，再按Command + S（Mac OS）

---

入门技巧

Documentation for Visual Studio Code​code.visualstudio.com

---

进阶技巧

1. 在聚焦项目管理，选中某个文件，然后直接搜索文件或文件夹名。

2.利用Emmet功能实现BEM规范。

3. json文件支持注释。

4. 文件总是新标签打开。

编辑器默认单击文件是预览（覆盖当前tab），双击文件是打开（新建tab标签）。

5. git管理。

• git允许强制推送。

• git提交后自动推送到远程仓库。

6.关闭"遥测"相关功能。

7. 关闭"Tweet反馈"相关功能。

---

插件

代码编辑插件

实用类

• vscode-Path Intellisense

文件名路径自动完成。

默认情况下，目录后斜杠是不会自动完成的，需要手动设置此插件选项。

• vscode-path-tools

文件路径转换。

• vscode-change-case

变量名命名风格切换。

• vscode-Remove empty lines

删除多行空白。

• vscode-ECMAScript Quotes Transformer

javascript中字符串转义。

• vscode-Bracket Pair Colorizer

代码括号高亮。

• vscode-Prettier

代码格式化工具。

一个业界最好的代码格式化工具，请认准Prettier formatter。

• vscode-ASCIIDecorator

ASCII字符生成。

代码注释逼格工具。

• vscode-Banner Comments +

ASCII字符生成。

代码注释逼格工具。

• vscode-koroFileHeader

生成文件头部注释和函数注释。

• vscode-REST Client

轻量级http请求测试。

复杂数据提交（图片，视频）建议使用postman会方便点。

• vscode-Ionide-FAKE

生成各种假数据类型。

• vscode-SVG Viewer

svg预览。

• vscode-Image preview

图片预览。

• vscode-RegExp Preview and Editor

正则表达式测试预览。

• vscode-Live Server

轻量级http服务器。

• vscode-Git Extension Pack

增强vscode的git集成扩展包，依赖其他插件。

• vscode-git-commit-plugin

git提交规范消息。

git消息规范来自AngularJS社区，仅供参考。

• vscode-Dependency Analytics

依赖分析第三库漏洞。

• vscode-Local History

本地文件历史记录。

• vscode-Code Spell Checker

代码检查拼写。

• vscode-CodeMetrics

检测代码圈复杂度。

• vscode-Comment Translate

内部文件Google翻译

• vscode-SFTP

FTP/SFTP连接服务器。

如果需要使用Terminal的话，请使用第三方SSH客户端SmarTTY或mobaXterm。

Web前端开发插件

• vscode-Debugger for Chrome

在vscode与Chrome调试代码。

建议直接使用Chrome developer tool调试较好。

• vscode-ESLint

javascript代码静态分析工具。

• vscode-stylelint

css/scss/less代码静态分析工具。

• vscode-Document This

jsdoc注释生成。

• vscode-Placeholder Images

占位图生成。

• vscode-Sorting HTML and Jade attributes

html属性排序。

代码洁癖症者使用。

• vscode-Turbo Console Log

快速生成控制台输出语句，支持批量添加，删除，注释打印语句。

以前我还一直手写console.log语句，又删又写又注释，这个插件简直就是调试输出的福音啊！

• vscode-csscomb

css属性排序。

代码洁癖症者使用。

• vscode-lit-html

html模板字符串内的html语法高亮。

• vscode-CSS Peek

class名定义跳转。

• vscode-BEM Helper

编写BEM风格的class类名。

• vscode-eCSStractor

抽取html页面中的class名，生成一个css文件。

• vscode-Quokka

javascript演练场。

• vscode-IntelliSense for CSS class names

识别当前项目所有class名，自动提示class类名。

• vscode-jQuery Code Snippets

jQuery语法高亮，语法提示。

• vscode-npm

npm语法高亮，语法提示。

• vscode-npm Intellisense

npm包路径提示。

• vscode-Version Lens

依赖包版本信息。

需要手动升级包版本。

• vscode-Vue.js Extension Pack

vue.js集成扩展包，依赖其他插件。

• vscode-vue peek

vue.js组件定义跳转。

vscode对vue.js组件定义跳转偏弱。

• vscode-vue-helper

vue.js组件函数跳转。

vscode对vue.js组件函数跳转偏弱。

• vscode-React Extension Pack

react.js集成扩展包，依赖其他插件。

• vscode-styled-components

styled-components语法高亮，语法提示。

• vscode-TSLint

typescript语法高亮，语法提示。

• vscode-Pug (Jade) snippets

pug模版语法提示。

---

延伸：

1. 不需要使用安装的插件。

• vscode-Auto Rename Tag
• vscode-Auto Close Tag
• vscode-Auto Import
• vscode-Trailing Spaces

删除空格需要在手动设置。

2. 所有插件的设置选项，可以在“设置”配置。

---

建议

Visual Studio Code虽然功能上接近现在成熟的其他IDE（Integrated Development Environment） ，但它仍然是文本编辑器，所以不要把编辑器与IDE比较功能。

Visual Studio Code最适合Web前端开发，因为是基于Electron技术实现的，对javascript/typescript语法支持最好。

为了工作效率与稳定性，请优先考虑使用Stable Build版本，不建议使用Insiders Edition版本。

按需安装Visual Studio Code插件，建议控制安装数量在二十个插件以内，否则会影响Visual Studio Code使用性能。