插件推荐

插件名	作用
Auto Rename Tag	自动补全标签
Autoprefixer	自动补全css兼容写法
Beautify	格式化代码
Beautify css/sass/scss/less	格式化CSS代码
Bookmarks	书签(可以精确到行)
Bracket Pair Colorizer	彩色括号匹配
Chinese (Simplified) Language Pack for Visual Studio Code	中文翻译
Color Highlight	标记所有颜色背景为其对于颜色
Color Info	颜色信息及转换
Debugger for Chrome	Chrome调试工具
EditorConfig for VS Code	EditorConfig自动识别配置
ESLint	ES语法检测且能设置保存自动格式化
filesize	左下角显示文件大小(点击可看Gzipped大小)
Git History	git历史查询插件
GitLens — Git supercharged	git可视化工具
Guides	缩进指示线
Highlight Matching Tag	高亮匹配标签
HTML CSS Support	HTML CSS 输入提示补全
HTML Snippets	HTML 输入提示补全
IntelliSense for CSS class names in HTML	CSS 标签调用输入提示补全
JavaScript (ES6) code snippets	ES6 输入提示补全
Minify	压缩 CSS JS 文件
Open In Default Browser	右键直接在默认浏览器中打开
Path Intellisense	文件、图片路径自动提示补全
Power Mode	有趣的打字特效
Settings Sync	在github上远程备份vscode设置
stylelint	CSS检测且能设置保存自动格式化
Sublime Text Keymap and Settings Importer	Sublime 快捷键
Theme - Seti-Monokai	超级舒适的黑色背景配色
Vetur	VUE 输入提示补全
VSCode Great Icons	文件名彩色图标
Vue 2 Snippets	VUE2 输入提示补全
VS Code Counter	代码行数统计

设置

在点击 文件(F) -> 首选项 -> 设置 里面我们可以找到 VScode 的设置部分，里面功能很全很细都有中文解释我就不细说，只想要强调两点硬核一些的设置

• 控制是否搜索中控制符号链接

TIP

是不是很难懂什么意思，我其实也不是特别懂，但是在配置特别差的电脑上面关掉这个设置你会发现无比的畅快

{
  "search.followSymlinks": false,
}

• 保存时候自动安装 eslint stylelint 配置规则对文档进行格式化

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
}

使用技巧

• Ctrl + D

  快速选择多个单词，并进行多行编辑，多用于重命名变量，当然你也可用 F2

• Shift + Alt + 鼠标点击拖动选择多行

  快速选择多行，进行多行编辑，在特殊场景下会很好用

  

• Ctrl + Shift + D

  选择单行多行直接复制在下方

• 电脑配置过低时候会觉得卡，可以设置 settings.json "search.followSymlinks": false,

  设置路径 文件 -> 首选项 -> 设置

• Ctrl + P

  快速查找文件，这个在 chrome 浏览器 F12 里面 Sources同样适用

• Ctrl + Shift + P

  各种扩展命令快捷搜索

• Ctrl + ~

  打开终端

• Ctrl + / Ctrl + A Ctrl + S

  注释代码 全选 保存

未完待续...