【VS code】正在使用的插件推荐：简化操作/美化界面

200531更新

• HTML Snippets：link+Tab直接引入css
• HTML CSS Support：
• CSS Modules：对使用了css modules的jsx标签的类名补全和跳转到定义位置
• vscode 自动整理所有引用import 不依赖插件：
  settings.json中加入配置项： “editor.codeActionsOnSave”: { “source.organizeImports”: true },
• cssrem：px转rem
• image preview：显示图片浏览的插件
• JS Refactor：
  
• JavaScript Booster：把var转为const或者let，去除多余的else语句，合并声明和初始化。
  
• code-spell-checker：
  
• js doc
  /**写注释 Ctrl+Shift+D
  
• JavaScript Snippets
  JS代码片段补全
• JavaScript (ES6) code snippets
  ES6的代码片段

React插件

• Reactjs code snippets
• React Redux ES6 Snippets
• React-Native/React/Redux snippets for es6/es7
• JavaScript (ES6) code snippets(es6代码片段)
• Typescript React code snippets
• npm Intellisense

插件

• 插件搜索：ctrl + shift + x
  或
  

• Path Auto Complete
  自动补全路径

• js doc
  使用/**写注释
  或自己设置快捷键。有关快捷键的设置点击VScode快捷键介绍
  个人设置：Ctrl+Shift+D
  效果如图：
  

• JavaScript Snippets
  JS代码片段补全【与HTML/CSS的Emmet语法有些类似】
  具体语法了解点击 JS快速输入介绍

• JavaScript (ES6) code snippets
  ES6的代码片段

• Python
  提供了代码分析，高亮，规范化等很多基本功能

• vscode-icons
  各种漂亮图标，方便找不同文件
  

• filesize
  左下角显示文件大小的插件

• Bracket Pair Colorizer
  成对的彩色括号
  

• ※Settings Sync
  可以同步 VS Code设置同步到 GitHub 账号，包括 setting 文件和插件设置。
  重新配置VS Code的时候只需同步一下即可。
  安装好插件后，在插件页面登录自己的GitHub账号即可。
  我不需要配置gist，但不排除需要配置gist的。待更新。

  • Upload Your Settings
    Press Shift + Alt + U
  • Download your Settings
    Press Shift + Alt + D

• Atom-Material
  一款安卓风的颜色主题，推荐使用推荐的字体设置。
  "editor.fontSize": 16, "editor.fontWeight": "400", "editor.lineHeight": 24, "editor.letterSpacing": 0.5
  

• Import Cost
  在行尾显示导入的包的大小

• Indent-Rainbow
  带颜色的缩进
  

• GitLens
  能显示每一行代码的作者以及提交时间。

• Git history
  Git 历史

• Color Highlight
  直观显示在 css/web 中定义的颜色
  

• Quokka.js
  实时执行 JavaScript 代码(做快速的 demo 很有用)

• Code Runner
  立刻运行代码

• Vetur
  Vue 工具插件

• Live server
  实时显示网页情况

• Python indent
  自动纠正 Python 缩进

• TODO Highlight
  高亮显示备注中的 TODO 事项，推荐配合 第19个插件， Todo Tree 使用
  在要做的事情上写 TODO: 大写、英文冒号
  

• Todo Tree
  点击左侧栏“树”的logo，显示 TODOList 条目，点击相应的条目，可以打开文件并定位到 TODO 行

• Auto Close Tag
  自动写关闭标签的插件

• Auto Rename Tag
  自动重命名关闭标签

• Polacode
  代码段生成图片
  复制代码——Ctrl+Shift+P——在框中输入> polacode——窗口粘贴代码——点击图标保存图片——右下角调整大小
  

• Guides
  比 VS Code自带的更好的参考线，可自定义

• Color Info
  显示css中的颜色属性信息

• Regex Previewer
  正则结果预览插件

• Mithril Emmet
  高效编写 HTML、CSS 代码的插件，能快速输入大部分内容
  比如，在编辑 HTML 文件时，输入tr*2>td*3，然后回车，就能快速生成一个两行三列的表格标签。
  Emmet语法 + Tab键

• vscode color picker

• js doc

• JavaScript Snippet Pack

• jQuery Code Snippets