常用优质插件的用法

TODO+

创建一个TODO列表问题件

安装 ext install vscode-todo-plus

常用命令

1
Todo: Open # 打开TODO文件

快捷键

1
2
3
4
Cmd/Ctrl+Enter # 将TODO标记为box
Alt+S # 将TODO标记为started
Alt+D # 将TODO标记为done
Alt+C # 将TODO标记为cancel

常用配置

1
2
3
4
"todo.symbols.box": "☐"
"todo.symbols.done": "✔"
"todo.symbols.cancel": "✘"
"todo.tags.names": ["critical", "high", "low", "today"]

示例文件

1
2
3
4
5
6
7
8
9
Todo:
  New:
    ☐ 项目列表
    ☐ @critical @high @low @today 高亮标签
    ☐ *加粗* _倾斜_ ~删除~ `代码`
  Done:
   ✔ 完成 @done(17-11-17 22:07)
  Cancel:
   ✘ 取消 @cancelled(17-11-17 22:08)

Bookmarks

快捷键

1
2
3
ctrl + alt + K # Bookmarks: Toggle 
ctrl + alt + L # Jump to Next
ctrl + alt + J # Jump to Previous

常用命令

1
2
3
4
5
6
7
8
9
10
11
Bookmarks: Toggle # 标记/取消 书签标记
Bookmarks: Jump to Next # 下一个书签
Bookmarks: Jump to Previous # 上一个书签
Bookmarks: List # 列出当前文件的所有书签
Bookmarks: List from All Files # 列出所有文件的所有书签
Bookmarks: Clear # 清除当前文件的所有书签
Bookmarks: Clear from All Files # 清除所有文件的所有书签
Bookmarks (Selection): Select Lines # 高亮书签行
Bookmarks (Selection): Expand Selection to Next
Bookmarks (Selection): Expand Selection to Previous
Bookmarks (Selection): Shrink Selection

常用配置

1
2
3
4
"bookmarks.gutterIconPath": "c:\\temp\\othericon.png"
"bookmarks.saveBookmarksInProject": true
"bookmarks.navigateThroughAllFiles": true
"bookmarks.treeview.visible": true

Markdown All in One

可以方便的编辑Markdown文件

快捷键

1
2
3
4
5
6
Alt + Shift + F # 代码格式化
Ctrl + B # 粗体
Ctrl + I # 斜体
Ctrl + Shift + ] # 标题升级
Ctrl + Shift + [ # 标题降级
Alt + C # 选中/取消 任务列表

常用配置

1
2
3
4
"markdown.extension.quickStyling": true
"markdown.extension.toc.orderedList": true
"markdown.extension.preview.autoShowPreviewToSide": true
"markdown.extension.showExplorer": true

常用插件分类

代码高亮与语言支持

vscode wxml

提供对微信小程序 wxml 语法高亮的支持。

Vetur

提供对Vue的支持，资料: Vetur Doc - GitBook

Snippet

1
2
3
4
scaffold # 展开vue模板
template # html、pug
script # js、ts
style # css、less、scss、sass、postcss、stylus

常用配置

1
2
3
4
5
6
7
"eslint.autoFixOnSave": true,
"eslint.validate": [
  {
    "language": "vue",
    "autoFix": true
  }
]

智能感知

1
2
npm i -S lodash
npm i -D @types/lodash
1
2
import * as _ from 'lodash'
// 使用 _. 就可以得到 lodash 代码提示

Weex

提供 vuejs (.vue)、weex (.we) 的语言支持， Weex官网地址 。

TODO Highlight

高亮关键字

1
TODO: FIXME:

常用命令

1
2
Toggle highlight
List hilighted annotations

常用配置

1
2
3
4
5
6
7
8
9
10
11
12
"todohighlight.isCaseSensitive": false
"todohighlight.include": [
  "**/*.js",
  "**/*.jsx",
  "**/*.ts",
  "**/*.tsx",
  "**/*.html",
  "**/*.php",
  "**/*.css",
  "**/*.scss",
  "**/*.vue"
]

vue-ls

这个扩展为 VSCode 增加了 vue 语言服务，解决 vue 单文件组件(.vue)文件的语法识别问题。

.vuelsrc文件配置

To support file path alias

1
2
3
4
5
6
7
8
9
10
11
12
13
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

HTML CSS Support

让 html 标签上写class 智能提示当前项目所支持的样式，新版已经支持scss文件检索。

代码验证

  • ESLint 提供ECMAScript代码验证
  • TSLint 提供TypeScript代码验证

stylelint

css/less/scss验证

puglint

HTMLHint

Code Spell Checker

代码提示与自动完成

vscode-wechat

提供小程序开发对应的wxml、wxss语法高亮支持，并提供对应的 snippets

Vue VSCode Snippets

Snippet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Vue
  vbase
Template
  vfor | vmodel | vmodel-num | von | vel-props
  vsrc | vstyle | vstyle-obj | vanim | vnuxtl
  vclass | vclass-obj | vclass-obj-mult
Script
  vdata | vmethod | vcomputed | vwatcher | vprops
  vimport | vimport-c | vimport-export | vimport-lib | vimport-gsap
  vfilter | vc-direct | vmixin | vmixin-use
  vanimhook-js | vcommit | vdispatch
  vinc | vdec
Vuex
  vstore | vgetter | vmutation | vaction | vstore-import
Nuxt
  nfont | ncss

VueHelper

Snippets and more feature

fileheader

添加文件头，包括用户名、更新日期，使用Ctrl + Alt + I进行标记。

配置文件:

1
2
3
4
{
  "fileheader.Author": "tom",
  "fileheader.LastModifiedBy": "jerry"
}

Document This

为js和ts添加JSDoc风格的注释，使用Ctrl + Alt + D + D 激活。

jQuery Code Snippets

Easy LESS

:emojisense:

常用配置:

1
2
3
4
5
6
"emojisense.languages": {
    "markdown": true,
    "git-commit": false,
    "plaintext": false,
    "json": true
}

Emoji

智能感知

IntelliSense for CSS class names

Path Intellisense

自动路劲补全

Npm Intellisense

require 时的包提示（最新版的vscode已经集成此功能）

Atuo Rename Tag

自动完成标签名修改匹配

代码美化

Pug beautify

常用命令

1
Beautify pug/jade

vscode-json

快捷键

1
2
3
4
5
cmd+alt+v # Validate
cmd+alt+b # Beautify
cmd+alt+u # Uglify
cmd+alt+' # Escape
cmd+alt+; # Unescape

常用命令

1
2
3
4
5
vscode-json: Validate
vscode-json: Beautify
vscode-json: Uglify
vscode-json: Escape
vscode-json: Unescape

JS-CSS-HTML Formatter

常用命令

1
2
3
Formatter
Formatter Config
Formatter Create Local Config

配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "onSave": false,
  "javascript": {
    "indent_size": 2,
    "end_with_newline": true
  },
  "css": {
    "indent_size": 2
  },
  "html": {
    "indent_size": 2,
    "indent_inner_html": true
  }
}

Beautify

keybindings.json 配置

1
2
3
4
5
{
  "key": "ctrl+b",
  "command": "HookyQR.beautify",
  "when": "editorFocus"
}

.jsbeautifyrc 配置

在项目根目录下新建.jsbeautifyrc进行配置，使用快捷键ctrl + B即可代码格式化。

1
2
3
4
5
6
7
{
  "indent_size": 2,
  "indent_char": " ",
  "css": {
    "indent_size": 2
  }
}

可用的配置映射:

.jsbeautifyrc setting VS Code setting
eol files.eol
tab_size editor.tabSize
indent_with_tabs (inverted) editor.insertSpaces
wrap_line_length html.format.wrapLineLength
unformatted html.format.unformatted
indent_inner_html html.format.indentInnerHtml
preserve_newlines html.format.preserveNewLines
max_preserve_newlines html.format.maxPreserveNewLines
indent_handlebars html.format.indentHandlebars
end_with_newline html.format.endWithNewline (html)
end_with_newline file.insertFinalNewLine (css, js)
extra_liners html.format.extraLiners
space_after_anon_function javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions
space_in_paren javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis

模板预览

Pug to HTML

常用命令

1
pug2html

Preview

A previewer of Markdown, ReStructured Text, HTML, Jade, Pug, Mermaid files, Image’s URI or CSS properties for Visual Studio Code.

命令工具

界面主题、图标与颜色

Output Colorizer

让控制台输出增添色彩。

按键映射

括号匹配

Bracket Pair Colorizer

让括号拥有独立的颜色，易于区分。可以配合任意主题使用。

Subtle Brackets

为括号匹配增加样式。

配置文件:

1
2
3
4
5
6
7
8
9
10
11
"subtleBrackets.styles": {
    "global": {
        "borderWidth": "1px",
        "borderStyle": "none none solid none"
    },
    "[]": { 
        "color": "white",
        "backgroundColor": "red",
        "borderStyle": "none"
    }
}

bracket-jumper

在匹配的括号之间跳转。

快捷键:

1
2
3
4
5
6
7
8
bracket-jumper.jumpLeft:    { Mac: ctrl+left, Windows/Linux: ctrl+alt+left }
bracket-jumper.jumpRight:   { Mac: ctrl+right, Windows/Linux: ctrl+alt+right }
bracket-jumper.selectLeft:  { Mac: ctrl+shift+left, Windows/Linux: ctrl+alt+shift+left }
bracket-jumper.selectRight: { Mac: ctrl+shift+right, Windows/Linux: ctrl+alt+shift+right }
bracket-jumper.ascendLeft:        { Mac: ctrl+up, Windows/Linux: ctrl+alt+up }
bracket-jumper.ascendRight:       { Mac: ctrl+down, Windows/Linux: ctrl+alt+down }
bracket-jumper.selectAscendLeft:  { Mac: ctrl+shift+up, Windows/Linux: ctrl+alt+shift+up }
bracket-jumper.selectAscendRight: { Mac: ctrl+shift+down, Windows/Linux: ctrl+alt+shift+down }

Bracket Selection

选择匹配括号之间的内容。

版本控制

Git Lens

丰富的git日志插件。

项目管理

Project Manager

在多个项目之前快速切换的工具。

其他

Code Runner

To run code:

  • use shortcut Ctrl+Alt+N
  • or press F1 and then select/type Run Code,
  • or right click the Text Editor and then click Run Code in editor context menu
  • or click Run Code button in edit
  • or title menuor click Run Code button in context menu of file explorer

To stop the running code:

  • use shortcut Ctrl+Alt+M
  • or press F1 and then select/type Stop Code Run
  • or right click the Output Channel and then click Stop Code Run in context menu

Document This

为js和ts添加JSDoc风格的注释，使用Ctrl + Alt + D + D 激活。

filesize

在状态栏显示文件大小，点击后还可以看到详细创建、修改时间。

Debugger for Chrome

让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试。

px2rem

一个CSS值转REM的VSCode插件

参考资料

vscode 插件推荐 - 献给所有前端工程师（2017.8.18更新）