VSCode常用插件

从IOS转前端,VSCode相对Xcode确实有很多便利之处,特别是强大的插件,用了三个小时,看了自己项目的插件,和其他文章的插件对比,总结了下:

HTML:
1.Auto Close Tag自动闭合HTML标签
2.Auto Rename Tag修改HTML标签时自动修改匹配标签
3.Highlight Matching Tag高亮对应的 HTML 标签 以及 标识出对应的各种括号
4.HTML Snippets只能生成代码段

CSS:
1.Beautify css/sass/scss/less显示颜色
2.stylelintCSS / SCSS / Less 语法检查
3.css-auto-prefix自动添加 CSS 私有前缀。
4.HTML CSS SupportCSS Class 智能提示
配置一下代码:

"editor.parameterHints": true,
"editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
}

5.SCSS IntelliSenseSCSS智能提醒

JS:
1.JavaScript (ES6) code snippetsJS代码段生成
2.jQuery Code Snippets
jquery代码段生成

VUE:
1.Veturvue语法高亮
2.VueHelpervue2代码段

Git:
1.GitLens — Git supercharged
2.Git History在当前文件右键点击Git:viewFileHistory,就能查看当前文件的所有提交信息,并且支持筛选,搜索。
3.Git Blameblame是追溯的意思,查看当前文件历史上谁修改过,编辑器左下角能看到是最近一次的编辑信息,点击右下角弹窗可直接打开网页gitlab,查看提交记录

其他:
1.Code Spell Checker单次拼写检测
2.vscode-fileheader文件创建者记录
3.vscode-icons文件图标
4.Bracket Pair Colorizer嵌套括号呈现不同颜色
5.Path Intellisense只能路径提示
6.Prettier - Code formatter格式化代码
7.Turbo Console Log快捷添加 console.log,一键 注释 / 启用 / 删除 所有 console.log
ctrl + alt + L选中变量之后,使用这个快捷键生成 console.log

alt + shift + c 注释所有 console.log

alt + shift + u 启用所有 console.log

alt + shift + d 删除所有 console.log
8.ESLint自动按语言规则格式化代码

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    "typescriptreact"
  ],
  "eslint.autoFixOnSave": true,

9.One Dark Pro主题风格

1.Debugger for Chrome

参考文章:https://www.jianshu.com/p/af33015b2c52
https://www.jianshu.com/p/3eebde5748a6

你可能感兴趣的:(VSCode常用插件)