首页手记 VSCode （for JS develop）...

VSCode （for JS develop）的使用小结与分享

标签：

Node.js

前言

编辑器之间的竞争一直也十分的激烈，用过Webstom，Hbuilder，之前sublime也被我折腾的写代码十分舒服，然而当出现了几乎所有使用过的人都发出好评的VScode的时候必然还是想去试试，用完几个月之后，着实真心感觉到了微软这波诚意也是到位了，"真的舒服"是我唯一能表达的感受，所以就从个人的角度出发对vscode的使用做一个小结，本文类似一个记录板，快捷键和代码块简写确实用熟练了能提高我们写代码的速度，所以本文会从这些可以以记得东西出发，到我所使用的插件的推荐，再到代码块的简写记录来表达我对这款编辑器的好评，也当做一个不熟练的笔记本吧。

常用快捷键

基础的到处使用类似于ctr+c是复制这种“客套话”就不说了....以下快捷键组合都是以MAC为例，不过带cmd键的你只要换成ctr在Win上也都是好使的。当然这些都是默认的快捷键，你自己改掉了一些快捷键不能说我赖皮。

常用`cmd+shift+?`系列

快捷键	功能
cmd+shift+D	打开Debugger
cmd+shift+K	删除光标所在的一整行
cmd+shift+L	选择当前文件中所有你当前选中的词汇
cmd+shift+F	打开全局搜索
cmd+shift+M	打开你的问题面板
cmd+shift+H	对当前文件的查询替换
cmd+shift+S	文件另存为
cmd+shift+T	打开最近关闭的那个文件
cmd+shift+X	打开安装插件的入口
cmd+shift+V	预览MarkDown
cmd+shift+空格	参数提示
cmd+shift+\	光标跳转到花括号闭合处

常用的`cmd+?`系列

快捷键	功能
cmd+B	打开或者关闭侧边栏
cmd+W	关闭当前窗口
cmd+P	打开最近关闭的文件
cmd+]/[	左右控制行缩进
cmd+/	注释一行或取消当前行的注释
cmd+F	查询在当前文件
cmd+,	打开用户设置
cmd+N	新建一个文件
cmd+O	打开一个文件
ctr+`	打开集成的终端

常用的`cmd+K ?`系列

在Vscode中的cmd+k我觉得像是vim中的退出到命令执行模式,他会等待你继续按下下面的命令，你也可以认为一系列的cmd+k系的都是组合件

cmd+k.png

所以接下来就是cmd+k系列的快捷键了

快捷键	功能
cmd+k cmd+s	打开快捷键设置(其实每个人的操作习惯不同，在此你可以自定义你的键组合)
cmd+k U	关闭工作区中没有更改的编辑窗口
cmd+k Z	进入zen模式，就是删除所有其他让人分心的元素，安心写代码的模式
cmd+k R	在mac中是在文件系统（Finder）中显示你正在编辑的文件
cmd+k P	复制当前文件的绝对路径

其余的我不常用的就不列举了，可以在快件键设置中查找或者自定义你的指法:)

插件推荐

插件推荐应该说明情况，由于本人的主要代码是Javascript（Node，ES6，ES5）和Python，主要框架为Vue，Express,也开始渐渐的直接在在Vscode中写Markdown了（之前使用MacDown其实也很舒服）。所以插件在于慢慢发现是和合适自己需求的，自己觉得舒服的。那么作为我的推荐以及我自己所使用的也会根据我自己的场景进行。

JavaScript

JavaScript (ES6) code snippetsES6常用语法生成代码块
JavaScript Snippet PackES5常用操作DOM的语法代码块

Node

Node.js Modules IntellisenseNode引入模块的时候智能提示
Npm Intellisense功能与上一个插件类似，也是在引入模块的时候十分的智能
Import Cost引入模块的时候后面能显示模块的大小
expresssnippetExpress常用代码块
webpack生成一个简单的webpack.config.js的大体结构（支持ES6）供继续改造

Python

python 6个million的下载量...

Vue

Vetur这个应该是开发vue必装的吧，语法高亮，功能强大。
Vue 2 Snippets提供一些常用模板代码块
vscode-element-helper对Element-UI提供全方位的支持

其他小工具

Auto Rename Tag关闭html标签，改动前面的标签名后面闭合的也会一起改。
Eslint规范代码
Beautify非常强大的格式化代码插件
open-in-browser右键编辑中的html可以选择直接在浏览器中打开

MarkDown

Markdown Preview Enhanced提供非常舒服的预览，和其他比较全面的支持
Markdown all in One为markdown语法提供常用快捷键

主题

One Dark Pro偏爱暗色系
Atom One Dark Theme感觉跟上面的差不多
vscode-icons文件图标

生成代码块插件的缩写记录

JavaScript (ES6) code snippets插件提供

简写	生成
`imp`	会生成`import moduleName from 'modulename'`
`imn`	直接引入不加模块名`import module`
`imd`	导入模块的一部分`import { } from 'module';`
`ime`	导入模块的所有内容并且进行重命名`import * as alias from 'module';`
`ima`	导入部分并重命名`import { originalName as alias } from 'module'`
`enf`	使用`export`导出一个方法`export const functionName = (params) => {};`
`edf`	使用`export default` 到处一个默认方法`export default (params) => {};`
`ecl`	使用`export defauly`导出一个默认类`export default class className {};`
`ece`	使用`export defauly`导出一个默认继承基类的类`export default class className extends baseclassName {}`
`con`	类中的构造函数`constructor(params) {}`
`met`	类中的方法`methodName(params) {}`
`pge`	类属性的get方法`get propertyName() {return this.;}`
`pse`	类属性中的set方法`set propertyName(value) {;}`
`prom`	返回一个promise对象`return new Promise((resolve, reject) => {});`
`anfn`	生成一个标准箭头函数`(params) => {}`
`dar`	数组解构`const [propertyName] = arrayToDestruct;`
`clg`	`console.log`

JavaScript Snippet Pack插件提供

简写	生成
`ae`	增添监听器`document.addEventListener('load', function (e) {});`
`cel`	创建一个dom对象`document.createElement(elem);`
`gi`	`document.getElementById('id');`
`gc`	`document.getElementsByClassName('class');`
`gt`	`document.getElementsByTagName('tag');`
`ih`	`document.innerHTML = 'elem';`
`afn`	function声明的匿名函数，正好补充了上面插件的`anfn`箭头函数
`fn`	具名函数`function methodName (arguments) {}`
`jp`	`JSON.parse(obj);`
`js`	`JSON.stringify(obj);`
`iife`	立即执行函数