vscode插件分享

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

介绍：此中文（简体）语言包为 VS Code 提供本地化界面。

TODO Highlight

介绍：高亮显示代码中的TODO、FIXME和其他注释。

// settings.json

"todohighlight.isEnable": true,
  "todohighlight.isCaseSensitive": true,
  "todohighlight.keywords": [
    "REVIEW:",
    {
      "text": "TODO:",
      "color": "#fce78b",
      "backgroundColor": "#7842f5",
      "overviewRulerColor": "#7842f5",
      "isWholeLine": true,
      "fontWeight": "bold",
      "fontFamily": "sans-serif",
      "border": "1px solid #eee",
      "borderRadius": "5px"
    },
    {
      "text": "FIXME:",
      "color": "#fff",
      "backgroundColor": "#f00",
      "overviewRulerColor": "#f00",
      "isWholeLine": true,
      "border": "1px solid #eee",
      "borderRadius": "15px"
    },
    {
      "text": "DEBUG:",
      "color": "#000",
      "backgroundColor": "#0f0",
      "overviewRulerColor": "#0f0",
      "isWholeLine": true,
      "fontWeight": "bold",
      "border": "1px solid #eee",
      "borderRadius": "15px"
    },
    {
      "text": "NOTE:",
      "color": "#fff",
      "backgroundColor": "#00a0ff",
      "overviewRulerColor": "#00a0ff",
      "isWholeLine": true,
      "border": "1px solid #eee",
      "borderRadius": "15px"
    }
  ],
  "todohighlight.defaultStyle": {
    "color": "#000",
    "backgroundColor": "#a0a0a0",
    "overviewRulerColor": "#a0a0a0",
    "border": "1px solid #eee",
    "borderRadius": "15px",
    "isWholeLine": true
    //other styling properties goes here ...
  },

Image preview

介绍：编辑器中鼠标移入图片链接显示图片预览

Stylelint

介绍：Visual Studio Code的官方样式扩展

Prettier - Code formatter

介绍：代码格式化

为了确保这个扩展可以在你已经安装的其他扩展上使用，一定要在VS Code设置中将它设置为默认的格式化器。此设置可以针对所有语言或特定语言进行设置。

// settings.json

"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

此外，如果不希望对特定语言进行自动格式化，可以在保存时禁用格式。

// settings.json

// Set the default
"editor.formatOnSave": true,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": false
}

 ESLint

介绍：功能强大的代码检查，自动修复工具

既可以支持通用的属性，也可以支持ESLint特定的属性

//settings.json
"editor.codeActionsOnSave": {
   "source.fixAll": true,
   "source.fixAll.eslint": false
}

 Code Spell Checker

介绍：源代码的拼写检查器

Error Lens

介绍：在代码行内提示报错或警告信息

Auto Rename Tag

介绍：自动重命名成对的HTML/XML标记

wechat-snippet

介绍：微信小程序代码辅助,代码片段自动完成

React/Redux/react-router Snippets

介绍：react代码片段自动补全

ES7 React/Redux/GraphQL/React-Native snippets

介绍：ES7 recat代码补全

 CSS Variable Autocomplete

介绍：自动完成CSS变量支持CSS, SCSS, LESS, PostCSS, VueJS, ReactJS等，颜色预览，跳转到的定义

Live Server

介绍：启动一个具有静态和动态页面实时重新加载功能的开发本地服务器

启动方式：没有html只能用4或5方式启动

1. 打开一个项目，从状态栏点击Go Live来打开/关闭服务器。实时控制预览

2. 右键单击资源管理器窗口中的HTML文件，然后单击“使用实时服务器打开”。资源管理器窗口控制。

3. 打开一个HTML文件，右键单击编辑器，然后单击Open with Live Server。编辑菜单选项预览

4. 按(alt+L, alt+O)打开服务器，按(alt+L, alt+C)停止服务器(您可以更改快捷键绑定形式)。[MAC上，cmd+L, cmd+O和cmd+L, cmd+C]

5. 按F1或ctrl+shift+P打开命令面板，输入Live Server: Open With Live Server启动服务器或输入Live Server: Stop Live Server停止服务器。

GitLens — Git supercharged

介绍：整合vscode和git

Git History

介绍：查看git日志，文件历史，比较分支或提交

示例（mac）：快捷键 ctrl+shift+p 输入Git: View History

px to rem & rpx & vw (cssrem)

介绍：编辑器中自动将px转化成rem，rpx，vw单位