VSCode (for JS develop)

https://www.jianshu.com/p/c56ea43b2b34

前言

编辑器之间的竞争一直也十分的激烈,用过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 (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 立即执行函数
  • Vue 2 snippets 插件提供

好就在vue是单独一套的语法结构所以在使用vue的时候基本上你敲入vue三个字母的时候你想要的就已经看到了,不用特殊的记忆

 

vc code js 配置的更多相关文章

  1. VC++6.0 配置CppUTest测试环境

    最近看<软件项目成功之道>,书中无数次提及到“单元测试”对于项目成败的重要性,看到同事将CppUTest用于Linux动态库测试,于是在VC++6.0环境下搭建一个基于CppUTest的单 ...

  2. r.js合并实践 --项目中用到require.js做生产时模块开发 r.js build.js配置详解

    本文所用源代码已上传,需要的朋友自行下载:点我下载 第一步: 全局安装  npm install -g requirejs 第二步: 1.以下例子主要实现功能, 1)引用jq库获取dom中元素文本, ...

  3. 在Visual Studio Code中配置GO开发环境

    一.GO语言安装 详情查看:GO语言下载.安装.配置 二.GoLang插件介绍 对于Visual Studio Code开发工具,有一款优秀的GoLang插件,它的主页为:https://github ...

  4. VC 6中配置OpenGL开发环境

    2010,2012中配置类似 http://hi.baidu.com/yanzi52351/item/f9a600dffa4caa4ddcf9be1d VC 6中配置OpenGL开发环境 这里,我习惯 ...

  5. Code::Blocks配置GTK+2和GTK+3

    Code::Blocks配置GTK+2和GTK+3 作者 He YiJun – storysnail<at>gmail.com 团队 ls 版权 转载请保留本声明! 本文档包含的原创代码根 ...

  6. Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置

    grunt.initConfig方法 用于模块配置,它接受一个对象作为参数.该对象的成员与使用的同名模块一一对应. 每个目标的具体设置,需要参考该模板的文档.就cssmin来讲,minify目标的参数 ...

  7. Visual Studio Code中配置GO开发环境

    在Visual Studio Code中配置GO开发环境 一.GO语言安装 详情查看:GO语言下载.安装.配置 二.GoLang插件介绍 对于Visual Studio Code开发工具,有一款优秀的 ...

  8. Require,js配置使用心得

    首先大家要知道requirejs是干嘛用的,要解释,那就用一句话说下:RequireJS是一个JavaScript文件和模块加载器接下来我们开始学会配置使用requireJs,当然在学习使用的过程中也 ...

  9. vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析

    1.下载vue-cli npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取https://github.com/vuejs/vue-cli 2.安装 ...

随机推荐

  1. HDU4714 Tree2cycle 解题报告

    题意 给定一棵无根树,删除或连接一条边的代价为\(1\),求把树变为环的最小代价. 前置思路 如果删除了\(k\)条边,使得树变成\((k+1)\)条链,再用\((k+1)\)次连接操作把树变成一个环 ...

  2. webpack4.41.0配置四(热替换)

    每次修改都要去编译,这个操作比较繁琐.所以我们希望编译过程是自动化的,而且页面的更新也是自动化的.所以需要使用这个热替换 1.首先安装webpack-dev-server:npm install  w ...

  3. JavaScript中的 typeof,null,和undefined

    typeof操作符 null 在JavaScript中null表示“什么都没有”. null是一个只有一个值的特殊类型.表示一个空对象引用. typeof null; 返回的是object 可以将nu ...

  4. springboot引入Oracle依赖

    最近学习spring boot,在网上找一些项目学习,有的项目引入了oracle驱动包,自己搭建一直不成功,百度发现说是权限问题无法下载. 然后参考下面博客终于解决:springboot引入Oracl ...

  5. JS高级---面向对象的编程思想(贪吃蛇梳理)

    面向对象的编程思想(贪吃蛇梳理) 模拟贪吃蛇游戏,做的项目 地图: 宽,高,背景颜色,因为小蛇和食物都是相对于地图显示的, 这里小蛇和食物都是地图的子元素, 随机位置显示, 脱离文档流的, 地图也需要 ...

  6. jquery实现点击显示,再点击隐藏

    //点击a标签,轮流显示和隐藏<div id="timo" style="background-color:red;height:50px;width:50px;& ...

  7. 忘记win8开机密码的清除方法

    1.进PE 2.打开计算机,进入 C:\Windows\System32 目录下 3.找到 magnify.exe 改名为 mangify1.exe .将 cmd.exe 改名为 magnify.ex ...

  8. java到js的中文无法显示,中文显示位(?)

    今天遇到这么一个问题,用js调用java的get请求,得到的json数据中中文无法正常显示,jsp文件中都是申明utf-8格式的,查询了一番,发现问题出现在@ResponseBody上 @Respon ...

  9. 插入数据:insert,replace

    *insert高级用法* 1.语法:insert into tbname(字段列表) values 值列表; 1.1可以不将所有的字段都插入数据.如果说需要完成部分字段的插入,需要必须存在字段列表. ...

  10. springboot的安装与初步使用

    1.引用springboot框架 1.在maven项目底下的pom.xml的中,引用springboot,如下 <?xml version="1.0" encoding=&q ...