VSCode使用技巧

VSCode使用技巧

1. 基本配置

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

• 那个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的下划线"
    }
  
  }

  直接给效果图再来解释比较好理解

  这里写图片描述

  • toRem: 只是一个单纯的描述

  • prefix: 是触发snippet的简写

  “`

  body

  “`

  是展开的代码片段

  • 1, 2表示占位符，用于用户展开代码片段所需要替换的，也可以写成${1:label}键值对的方式

  • description : 用户你在输出snippet之前，方便自己识别的注释，而不用强行记忆那些简写的

必备插件

功能性

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

代码片段插件

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

语法校验

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

主题

1. Panda:用了相当久的一套颜色高亮，个人感觉很耐看
2. Enki Theme (Material Design Inspired) : 当前用的代码高亮，个人感觉很赞
3. 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