VSCode使用技巧

亦凉 2022-06-12 04:38 284阅读 0赞

# VSCode使用技巧 #

#  #

# 1. 基本配置 #

![854e10f5ee2427a47147d1869e6739c4][]

![134b073f217fbaf288f56d825dc368c6][]

# 快捷键自定义（Ctrl+K Ctrl + S） #

![2fa79b19de0ae440b2addcc3cdba79c5][]

*  那个`when`支持条件表达式返回一个布尔值
 *  支持的快捷键组合快捷键的键值
    
    
    
    # 代码片段 #
    
    进入代码片段自定义有两种方式：
    
    1.  【菜单栏->文件->首选项->用户代码片段】
    2.  全局命令【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的下划线"
          }
        
        }
    
    直接给效果图再来解释比较好理解
    
    ![img][]这里写图片描述
    
     *  `toRem`: 只是一个单纯的描述
     *  `prefix`: 是触发snippet的简写
    
     *  “\`
    
    body “\`
    
    是展开的代码片段
    
     *  1,2表示占位符，用于用户展开代码片段所需要替换的，也可以写成`${1:label}`键值对的方式
     *  `description` : 用户你在输出snippet之前，方便自己识别的注释，而不用强行记忆那些简写的

# 必备插件 #

## 功能性 ##

1.  [Auto Close Tag ][Auto Close Tag]: 匹配标签，关闭对应的标签。很实用【HTML/XML】
2.  [Auto Rename Tag][] : sublime和webstorm也有这个内置功能，改变标签的时候同时改动开闭合标签；【HTML/XML】
3.  [beautify][] : 良好的拓展性，可以格式化`JSON|JS|HTML|CSS|SCSS`,比内置格式化好用
4.  [Code Runner ][Code Runner]: 代码编译运行看结果，支持众多语言
5.  [colorize][] : 会给颜色代码增加一个当前匹配代码颜色的背景，非常好
6.  [Document This ][Document This]: JSDOC注解调用，值得易用
7.  [Git History ][Git History]: 不得不赞的插件，谁用谁知道，功能很赞
8.  [HTML CSS Support ][HTML CSS Support]: 这个也是必备插件之一
9.  [Path Autocomplete ][Path Autocomplete]: 路径智能补全
10. [Path Intellisense ][Path Autocomplete]： 路径智能提示.
11. [SCSS IntelliSense Preview][] : SCSS智能提醒，配置强大
12. **Syncing**: 这个同步插件要比官方市场那个最高下载量的要好，支持删除同步！！！
13. [Version Lens ][Version Lens]: 可以及时看到`package.json`内部版本的变动，很实用
14. [Output Colorizer ][Output Colorizer]: 可以终端日志输出着色，实用

## 代码片段插件 ##

1.  [JavaScript (ES6) code snippets ][JavaScript _ES6_ code snippets]: ES6的代码片段，实用
2.  [JavaScript Snippet Pack ][JavaScript Snippet Pack]: ES5及以下的代码片段，实用

## 语法校验 ##

1.  [stylelint][] : 比内置的要全，更智能

## 主题 ##

1.  [Panda][]:用了相当久的一套颜色高亮，个人感觉很耐看
2.  [Enki Theme (Material Design Inspired)][Enki Theme _Material Design Inspired] : 当前用的代码高亮，个人感觉很赞
3.  [Material Icon Theme ][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][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][React-Native_React_Redux snippets for es6_es7]:这个是比较重量级的插件，而且作者更新很勤快
     *  [Typescript React/Redux Snippets][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][https_juejin.im_post_592542c58d6d810058025d06]

[854e10f5ee2427a47147d1869e6739c4]: https://user-gold-cdn.xitu.io/2017/2/23/854e10f5ee2427a47147d1869e6739c4
[134b073f217fbaf288f56d825dc368c6]: https://user-gold-cdn.xitu.io/2017/2/23/134b073f217fbaf288f56d825dc368c6
[2fa79b19de0ae440b2addcc3cdba79c5]: https://user-gold-cdn.xitu.io/2017/2/23/2fa79b19de0ae440b2addcc3cdba79c5
[img]: https://user-gold-cdn.xitu.io/2017/2/23/204d3456162156dec5fa099ce73d8595
[Auto Close Tag]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dformulahendry.auto-close-tag
[Auto Rename Tag]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dformulahendry.auto-rename-tag
[beautify]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DHookyQR.beautify
[Code Runner]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dformulahendry.code-runner
[colorize]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dkamikillerto.vscode-colorize
[Document This]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Djoelday.docthis
[Git History]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Ddonjayamanne.githistory
[HTML CSS Support]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Decmel.vscode-html-css
[Path Autocomplete]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dchristian-kohler.path-intellisense
[SCSS IntelliSense Preview]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dmrmlnc.vscode-scss
[Version Lens]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dpflannery.vscode-versionlens
[Output Colorizer]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DIBM.output-colorizer
[JavaScript _ES6_ code snippets]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dxabikos.JavaScriptSnippets
[JavaScript Snippet Pack]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dakamud.vscode-javascript-snippet-pack
[stylelint]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dshinnn.stylelint
[Panda]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dtinkertrain.theme-panda
[Enki Theme _Material Design Inspired]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Ddorelljames.enki-theme-vscode
[Material Icon Theme]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DPKief.material-icon-theme
[Better Merge]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dpprice.better-merge
[Folder Indexing]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dastral-keks.folder-indexing
[Git Indicators]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dlamartire.git-indicators
[gitk]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dhowardzuo.vscode-gitk
[Angular Language Service]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DAngular.ng-template
[JSON to TS]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DMariusAlchimavicius.json-to-ts
[move-imports]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dasvetliakov.move-imports
[Node.js Modules Intellisense]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dleizongmin.node-module-intellisense
[npm]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dfknop.vscode-npm
[ExpressSnippet]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dvladmrnv.expresssnippet
[ES6 Mocha Snippets]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dspoonscen.es6-mocha-snippets
[TurboJavaScript]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DIcehunter.TurboJavaScript
[Angular 2_ Snippets - TypeScript_ Html_ ngRx_ Angular Flex Layout _ Testing]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DMikael.Angular-BeastCode
[Vue TypeScript Snippets]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dducksoupdev.Vue2
[VueHelper]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Doysun.vuehelper
[vetur]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Doctref.vetur
[React-Native_React_Redux snippets for es6_es7]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DEQuimper.react-native-react-redux
[Typescript React_Redux Snippets]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dabotteram.typescript-react-snippets
[nginx.conf]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dshanoor.vscode-nginx
[nginx.conf hint]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dhangxingliu.vscode-nginx-conf-hint
[bluloco-dark]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Duloco.theme-bluloco-dark
[One Dark Pro]: https://link.juejin.im/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dzhuangtongfa.Material-theme
[https_juejin.im_post_592542c58d6d810058025d06]: https://juejin.im/post/592542c58d6d810058025d06