vc code js 配置
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
系列的快捷键了
快捷键 | 功能 |
---|---|
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 |
立即执行函数 |
- Vue 2 snippets 插件提供
好就在vue是单独一套的语法结构所以在使用vue的时候基本上你敲入vue
三个字母的时候你想要的就已经看到了,不用特殊的记忆
vc code js 配置的更多相关文章
- VC++6.0 配置CppUTest测试环境
最近看<软件项目成功之道>,书中无数次提及到“单元测试”对于项目成败的重要性,看到同事将CppUTest用于Linux动态库测试,于是在VC++6.0环境下搭建一个基于CppUTest的单 ...
- r.js合并实践 --项目中用到require.js做生产时模块开发 r.js build.js配置详解
本文所用源代码已上传,需要的朋友自行下载:点我下载 第一步: 全局安装 npm install -g requirejs 第二步: 1.以下例子主要实现功能, 1)引用jq库获取dom中元素文本, ...
- 在Visual Studio Code中配置GO开发环境
一.GO语言安装 详情查看:GO语言下载.安装.配置 二.GoLang插件介绍 对于Visual Studio Code开发工具,有一款优秀的GoLang插件,它的主页为:https://github ...
- VC 6中配置OpenGL开发环境
2010,2012中配置类似 http://hi.baidu.com/yanzi52351/item/f9a600dffa4caa4ddcf9be1d VC 6中配置OpenGL开发环境 这里,我习惯 ...
- Code::Blocks配置GTK+2和GTK+3
Code::Blocks配置GTK+2和GTK+3 作者 He YiJun – storysnail<at>gmail.com 团队 ls 版权 转载请保留本声明! 本文档包含的原创代码根 ...
- Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置
grunt.initConfig方法 用于模块配置,它接受一个对象作为参数.该对象的成员与使用的同名模块一一对应. 每个目标的具体设置,需要参考该模板的文档.就cssmin来讲,minify目标的参数 ...
- Visual Studio Code中配置GO开发环境
在Visual Studio Code中配置GO开发环境 一.GO语言安装 详情查看:GO语言下载.安装.配置 二.GoLang插件介绍 对于Visual Studio Code开发工具,有一款优秀的 ...
- Require,js配置使用心得
首先大家要知道requirejs是干嘛用的,要解释,那就用一句话说下:RequireJS是一个JavaScript文件和模块加载器接下来我们开始学会配置使用requireJs,当然在学习使用的过程中也 ...
- 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.安装 ...
随机推荐
- Linux使用mount挂载samba共享文件夹
挂载smb的目录,使用读写644权限 mount -t cifs -o "rw,dir_mode=0644,file_mode=0644,username=username,password ...
- LED Decorative Light Supplier - Decorative Use Of LED Light Strips
Led strip refers to the led assembly in the ribbon of the FPC (flexible circuit board) or PCB hard b ...
- 2019年9月2日,亲自最新JDK12.0.2和JRE1.8.0的下载和配置(64bit),被其他教程坑了几圈忍不住自己写一篇
前因/ 新买了电脑,想在家写前端页面,看到最新版的JDK12.0.2和JRE1.8.0,就想着要用就用最新的,才对得起我的I9电脑.本人也是半生不熟,公司用的都是前辈配置好的环境,并且是JDK8很老了 ...
- Object.fromEntries
//数组转换成对象 const arr = [['foo', 1],['bar', 2]] const obj = Object.fromEntries(arr) console.log(obj.ba ...
- win7搭建python环境--同时安装版本2和版本3
软件准备[以win7 64位系统为例] python2.x版本建议使用2.7.9或更新版本,因为该版本开始集成了setuptools和pip,这样省去了不少功夫 python2.7.9下载地址: ht ...
- IntelliJ IDEA 2017.3尚硅谷-----卸载
直接在用户目录下搜索,卸载的干净就要删除 删除这两个目录,重启idea可以还原配置. editplus删除后重启也是这个效果
- opencv:边缘提取
#include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace st ...
- 左偏树(p4431)
难得不是左偏树,而是思维: 这道题在做得时候,有两个性质 1.如果a是一个不下降序列,那么b[i]==a[i]时取得最优解. 2.如果a是一个严格递减序列,则取a序列的中位数x,令b[1]=b[2]= ...
- React的React.createRef()/forwardRef()源码解析(三)
1.refs三种使用用法 1.字符串 1.1 dom节点上使用 获取真实的dom节点 //使用步骤: 1. <input ref="stringRef" /> 2. t ...
- 解决ubuntu和win10双系统时间不一致
1.在ubuntu下安装ntpdate sudo apt install ntpdate 2.设置同步windows时间 sudo ntpdate time.windows.com 3.把时间更新到硬 ...