VSCode使用技巧
2017-07-15 17:55
597 查看
VSCode使用技巧
1. 基本配置
快捷键自定义(Ctrl+K Ctrl + S)
那个
when支持条件表达式返回一个布尔值
支持的快捷键组合快捷键的键值
代码片段
进入代码片段自定义有两种方式:【菜单栏->文件->首选项->用户代码片段】
全局命令【ctrl+shift + p => snippet】
VSCODE的代码片段支持30多种编程语言,所以也免了代码片命名唯一和全局生效【所有文件】的尴尬
这里就选择一个sass的说下,内部有这么一段注释嗯
{ /* // Place your snippets for Sass here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected. // Example: "Print to console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" } */ "utf-8": { "prefix": "utf-8", "body": [ "@charset 'UTF-8';" ], "description": "插入文件编码" }, "impout": { "prefix": "impcfg", "body": [ "@import '../../../assets/scss_styles/custom_scss/_custom-export.scss';" ], "description": "插入配置文件" }, "toRem": { "prefix": "rem", "body": [ "toRem($0)" ], "description": "插入px转换函数" }, "removeDedault": { "prefix": "ra", "body": [ "@include remove-a-default-behavior" ], "description": "移除a的下划线" } }
直接给效果图再来解释比较好理解
这里写图片描述
toRem: 只是一个单纯的描述
prefix: 是触发snippet的简写
“`
body
“`
是展开的代码片段
1,2表示占位符,用于用户展开代码片段所需要替换的,也可以写成
${1:label}键值对的方式
description: 用户你在输出snippet之前,方便自己识别的注释,而不用强行记忆那些简写的
必备插件
功能性
Auto Close Tag : 匹配标签,关闭对应的标签。很实用【HTML/XML】Auto Rename Tag : sublime和webstorm也有这个内置功能,改变标签的时候同时改动开闭合标签;【HTML/XML】
beautify : 良好的拓展性,可以格式化
JSON|JS|HTML|CSS|SCSS,比内置格式化好用
Code Runner : 代码编译运行看结果,支持众多语言
colorize : 会给颜色代码增加一个当前匹配代码颜色的背景,非常好
Document This : JSDOC注解调用,值得易用
Git History : 不得不赞的插件,谁用谁知道,功能很赞
HTML CSS Support : 这个也是必备插件之一
Path Autocomplete : 路径智能补全
Path Intellisense : 路径智能提示.
SCSS IntelliSense Preview : SCSS智能提醒,配置强大
Syncing: 这个同步插件要比官方市场那个最高下载量的要好,支持删除同步!!!
Version Lens : 可以及时看到
package.json内部版本的变动,很实用
Output Colorizer : 可以终端日志输出着色,实用
代码片段插件
JavaScript (ES6) code snippets : ES6的代码片段,实用JavaScript Snippet Pack : ES5及以下的代码片段,实用
语法校验
stylelint : 比内置的要全,更智能主题
Panda:用了相当久的一套颜色高亮,个人感觉很耐看Enki Theme (Material Design Inspired) : 当前用的代码高亮,个人感觉很赞
Material Icon Theme : 一套扁平化的文件图标,内置的
seti也很优秀,还有
simple icon和
vscode-icons
扩展插件集
版本及文件管理Better Merge : 用来解决文件冲突的不二利器,经过多个版本的更新,稳定很多。。推荐
Folder Indexing: 提高文件的索引速度[常驻于内存中],这对于项目比较大的小伙伴必须安装啊
Git Indicators: 类似
github上的统计提交代码增减条目,在状态栏显示,很小巧实用
gitk:有了这个,版本实时比对,这个真心好
Angular 2+ && Typescript 2+
Angular Language Service: 对于用ng2+开发的小伙伴,这又是一个必备插件,定义跳转,补全,信息提示等。。。
JSON to TS:有了这个来声明和后台协商的对接接口简直不能再方便了【
typescript interface】。。。
move-imports: 虽然不能说完美无BUG,但是至少常规的迁移[
js, jsx, ts, tsx]是可以同步改动的,值得安装
Node
Node.js Modules Intellisense:对于
node_module的智能提示太友好了。。。必装
npm: 可以直接在vscode执行npm的一些命令,相当实用。试试就知道了
ExpressSnippet: express的代码片段,实用推荐
ES6 Mocha Snippets:单元测试
Mocha的代码片段
snippet
TurboJavaScript:相当齐全的js的代码片段简写,熟练了效率高的不是一点两点
Angular 2+ Snippets - TypeScript, Html, ngRx, Angular Flex Layout & Testing: 这货的代码片断涵盖范围太广了,真佩服作者去汇总
Vue
Vue TypeScript Snippets:我发现我偏爱
ts,vue的ts代码片段。。作者在最近的
vueconf也提出了
v2.4将会引入ts来规范开发
VueHelper:国人写的一个针对
vue2,router,vuex的代码提示,涵盖了大部分的API,投入了很多精力啊,赞一个
vetur:语法高亮及智能提示
React
React-Native/React/Redux snippets for es6/es7:这个是比较重量级的插件,而且作者更新很勤快
Typescript React/Redux Snippets:
ts语法的
react代码片段
nginx
nginx非常适合做前端的服务层,好处太多,反向代理避免跨域,负载均衡
nginx.conf:高亮
nginx的配置文件,可能以后的版本会引入
.conf的语法高亮而不需要安装此插件
nginx.conf hint:
nginx配置文件的智能提示和补全,好不好用你说了算
Theme
有两个推荐的主题,我个人觉得很耐看的
bluloco-dark: 颜色很对我眼
One Dark Pro: Atom主题的
vscode版本,作者做了一些调整
总结
希望该篇文章可以帮到一些小伙伴节省时间,加快开发。把掘金的文章汇总了一下,希望对大家有用。。
参考:https://juejin.im/post/592542c58d6d810058025d06
相关文章推荐
- VS Code使用技巧整理
- Vscode使用技巧
- VsCode使用技巧
- .NET Core快速入门教程 5、使用VS Code进行C#代码调试的技巧
- VS code 使用技巧
- VScode使用技巧
- .NET Core快速入门教程 5、使用VS Code进行C#代码调试的技巧
- Vscode中Javascript使用TypeScript文件实现智能提示
- VS2010技巧:如何在js文件中使用jQuery智能感知(转)
- vs code 快捷键的使用
- VS 使用技巧集绵
- VS 20XX 使用技巧总结
- ubuntu下使用VScode打开本地使用makefile编译的工程(包括命令行参数的配置)
- VS使用技巧——工欲善其事必先利其器
- 使用vs2013编译时遇到error msb3073 vcend exited with code 1
- ubuntu 下 codeblocks 的使用 各种技巧
- VS使用技巧
- 使用VS Code进行C语言学习
- 如何优雅地使用 VSCode 来编辑 vue 文件?
- VS(Visual Studio)的使用技巧