vscode编辑器插件总结

之前一直用webstorm，webstorm确实太重了，后来无意中发现了vscode。高颜值吸引了我哈哈哈…就一直用着。

很喜欢VScode的插件功能~想要什么插件就搜索，比如搜索angular

只要点击一下某款插件，插件的介绍和用法都会在右侧窗口详细介绍，还会有小动画演示用法

• Auto Rename Tag——自动同步修改标签
• AutoFileName——自动补全路径提示
• Atom JavaScript Snippet —— 代码块简写提示（比如console.log 只需要 写log 然后tab—）
• snippet-creator ——这个插件方便自己增加一些自己想增加 的代码块简写提示，毕竟Atom JavaScript Snippet提示的都是些js的
• Bootstrap 3 Snippets——bootstrap必备
• Beautify——代码格式化
• ** Comment Translate**——代码英文注释翻译（看外国源码有用）
• Debugger for Chrome ——方便调试
• Document This——Js的注释模板
• ESLint——检测JS必备
• Easy Less—— less文件自动实时编译成css
• Easy Sass—— scss/sass文件自动实时编译成css
• filesize——查看文件大小的
• GBKtoUTF8——转码
• Git History (git log)——git提交历史
• HTML CSS Support——css自动补齐
• HTML Snippets——支持HTML5的标签提示
• Image Preview——图片预览，这个在代码里就知道自己引用了哪个图片
• jsx-beautify——jsx文件格式化
• JavaScript (ES6) code snippets
• jQuery Code Snippets——jquery 自动提示
• JS-CSS-HTML Formatter——代码对齐。每次保存代码的时候它会自动对齐代码
• Live Server——点击右下角的"Go Live" 就可以把当前项目启一个本地服务。特别方便！wamp/phpstudy都抛弃了…
• Local History——代码本地备份，如果用这个插件的话，项目会多一个.history ，git忽略即可。
• Naive Definitions——查找变量定义
• Markdown Theme Kit——一款markdown主题
• node-readme
• Npm Intellisense——npm包代码提示
• One Dark Theme——一款背景主题
• Path Intellisense——路径自动补全
• Project Manager
• Typings Installer——安装vscode 的代码提示依赖库，基于typtings的，比如提示angular或者jQuery智能感知
• vetur——目前比较好的Vue语法高亮

  //vetur的配置[文件-首选项-设置]在右侧覆盖~
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue"
    ],
    "files.associations": {
        "*.vue": "vue"
    }

• View In Browser——在浏览器中预览页面（ctrl+F1）
• vscode-icons—— 让vscode资源目录加上图标
• Vue 2 Snippets
• Naive Definitions 跳转到 JavaScript 变量定义

微信小程序相关插件：

-vscode weapp api —— 微信小程序 API 代码片段
-vscode wxml —— 为 VSCode 提供 wxml 语法支持及代码片段
-vscode-wechat

设置字体大小等：

[文件-首选项-设置] 在右侧覆盖

设置快捷键

[文件-首选项-键盘快捷方式] 在右侧覆盖

因为之前一直用的webstorm，习惯了webstorm的快捷键。所以我把常用的快捷键设置成了webstorm的：（把一以下代码放在右侧覆盖）你也可以自己配置你的常用快捷键

// 将键绑定放入此文件中以覆盖默认值
[
    {
        "key": "shift+enter",
        "command": "editor.action.insertLineAfter",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+/",
        "command": "editor.action.blockComment",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+alt+l",
        "command": "editor.action.formatDocument",
        "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+d",
        "command": "editor.action.copyLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    }
]

插件备份

window系统下如果换电脑了，把插件全部copy走。把extensions文件夹拷走就行。
以后再用的话也不需要一个个安装，直接把这个文件夹丢到该路径下。
vscode 插件安装的路径：C:\Users\mbo.vscode\extensions

6.13补充：

VScode一直在更新，最近更新后，界面显示语言变成了英文。如果想设置成中文，按住f1 或者ctrl+shift+p 进入命令行，输入“ Configure Language”

上图是英文：en
配置成中文：zh-CN