VS code 常用插件

1. Chinese (Simplified) Language Pack for Visual Studio Code

中文简体语言包

2. vscode-icons

能够给文件夹、文件添加上舒适的图标,而且可以自动检测项目,根据项目不同功能配上不同图标

3. auto close tag

自动关闭标签,在开始标记的结束括号中键入后,将自动插入结束标记

4. Auto Rename Tag

自动完成同一个标签的同步修改

5. Beautify

在代码文件右键鼠标一键格式化 html,js,css

6. Better Comments

让VS Code注释信息更加人性化。可以根据告警、查询、TODO、高亮等标记对注释进行不同的展示。此外,还可以对注释掉的代码进行样式设置。

7. Bracket Pair Colorizer

可以给()、[]、{}这些常用括号显示不同颜色,当点击对应括号时能够用线段直接链接到一起,让层次结构一目了然。

8. Path Intellisense

自动提示文件路径,支持各种快速引入文件

9. HTML Snippets

智能提示HTML标签,以及标签含义

10. Npm Intellisense

require时的包提示

11. Vetur

Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。(VScode官方钦定Vue插件,Vue开发者必备。)

12. JavaScript(ES6) code snippets

ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

13. ESLint

js语法纠错,可以自定义配置,不过配置较为复杂,建议使用网上一些广泛使用的eslint配置

14. Prettier

代码格式化工具,和ESLint相配合

15. KoroFileHeader

添加注释工具
1. 文件头部注释
快捷键:crtl+alt+i(window),ctrl+cmd+t (mac)
2. 函数注释
快捷键:ctrl+alt+t (window), ctrl+alt+t(mac)

setting.json中增加如下配置:

// 文件头部注释
    "fileheader.customMade": {
   
     
     
        "Descripttion":"",
        "version":"",
        "Author":"sueRimn",
        "Date":"Do not edit",
        "LastEditors":"sueRimn",
        "LastEditTime":"Do not Edit"
    },
    //函数注释
    "fileheader.cursorMode": {
   
     
     
        "name":"",
        "msg":"",
        "param":"",
        "return":""
    }

16. Git History

可以在vscode里面查看git历史

17. GitLens — Git supercharged

可以显示每一行的提交的人是谁

格式化代码

(转https://blog.csdn.net/userkang/article/details/84302629)
a. 先按步骤打开 setting 界面,
Code --> preferences -->setting (也可以快捷键 command + ,(mac) 直接打开)现在看到的是界面配置模式,点击右上角的红色区域按钮(如下图),可以打开 settings.json 文件。pic_a3db44fd.png
b. 将下面配置添加到 setting.json 文件中
注: 此配置支持 CSS、HTML、JS 和 Vue 等文件的格式化。大家可以参考,然后结合自己的需求去配置。

{
   
     
     
  // tab 大小为4个空格
  "editor.tabSize": 4,
  // 保存时格式化
  "editor.formatOnSave": true,
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  //设置侧边栏图标的样式模板
  "workbench.iconTheme": "vscode-icons",
  //vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
   
     
     
    "prettier": {
   
     
     
      "semi": false,
      "singleQuote": true
    }
  },
  // eslint 检测文件类型
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  // 设置 eslint 保存时自动修复
  "editor.codeActionsOnSave": {
   
     
     
    "source.fixAll.eslint": true
  }
}
原文地址:https://www.cnblogs.com/hustshu/p/14627641.html