VScode commonly used plug-ins (continue to add)

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. Winter

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

12. JavaScript(ES6) code snippets

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

13. ESLint

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

Format code

(Go to https://blog.csdn.net/userkang/article/details/84302629)
a. First open the setting interface according to the steps,
Code --> preferences -->setting (You can also use the shortcut key command +, (mac) directly Open) Now you see the interface configuration mode, click the red area button in the upper right corner (as shown below) to open the settings.json file. Insert picture description here
b. Add the following configuration to the setting.json file.
Note: This configuration supports the formatting of CSS, HTML, JS and Vue files. You can refer to it and configure it according to your own needs.

{
    
    
  // 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
  }
}

Guess you like

Origin blog.csdn.net/qq_17627195/article/details/108978097