10.推荐vscode 前端常用插件

1.Live Server

Live Server 插件是一个用于前端开发的扩展，它的主要作用是提供一个本地开发服务器，以便实时预览和调试网页应用程序。其最大特点在于热重载，即开发者可实时预览代码效果。 因为Live Server 允许开发者在浏览器中实时预览您正在编辑的网页。每当保存HTML、CSS、JavaScript文件时，该插件会自动刷新浏览器，以便开发者可以立即看到页面的更改效果

2.Auto Close Tag

该插件帮助我们输入标签的时候，自动结束标签。通常想要使用一个特定的 HTML 元素时，需要手动输入开始标签和结束标签。而当使用该插件后，只需要输入开始标签，它就会自动添加结束标签。此外，对于 Vue 开发者来说，它还支持自定义类型名称。当输入自定义组件的开始标签时，它会自动添加结束标签。

3.Auto Rename Tag

该插件帮助我们在重命名一个标签时，自动重命名

HTML 

标签的开始和结束标签。避免只修改了开始标签，而忘记修改结束标签。该扩展适用于

HTML、XML、PHP 和 JavaScript

。

4.Vue Language Features (Volar)

该插件可以让

Vue

代码获得漂亮的语法高亮显示、错误检查和代码格式化。并且它还会对很多

 Vue

指令和事件处理程序，进行提示和建议。

5.ESLint

用于代码规范的检查，这个插件使得开发者可以在编写代码的过程中即时发现和修正错误，极大地提高了编程效率和代码质量

6.Prettier - Code formatter

这是一个代码格式化工具，它可以帮助开发者以统一的方式格式化，从而极大地提高了代码的可读性和可维护性,同时可以在vscode settings.json 下面配置格式化规范从而实现保存按照eslint以及代码规范自动格式化，以下是目前配置好的一个自动保存eslint格式化的settings.json

{
  "editor.tabSize": 2,
  "editor.guides.bracketPairs": "active",
  "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
  "prettier.eslintIntegration": true, //使用单引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatterOptions": {
    "wrap_attributes": "force-expand-multiline",
    // 对属性进行换行 wrap_attributes
    // - auto: 仅在超出行长度时才对属性进行换行。
    // - force: 对除第一个属性外的其他每个属性进行换行。
    // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
    // - force-expand-multiline: 对每个属性进行换行。
    // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline",
      "wrap_line_length": 120,
      "semi": false,
      "singleQuote": true,
      "end_with_newline": false
    }
  },
  "eslint.validate": [
    //开启对.vue文件中错误的检查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true, // 使用单引号
  "prettier.semi": false,
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "cssrem.rootFontSize": 100,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.startupEditor": "newUntitledFile",
  "gitlens.hovers.currentLine.over": "line",
  "security.workspace.trust.untrustedFiles": "open",
  "git.confirmSync": false,
  "[scss]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  "git.suggestSmartCommit": false,
  "workbench.editorAssociations": {
    "*.dll": "default"
  },
  "editor.formatOnSave": true
}

7.GitLens — Git supercharged

GitLens Git supercharged 能够通过Git进行代码注释，让你更好地理解代码的历史和来源。比较方便的是，它可以直观的看到某行代码的最后修改人，以及日期和提交记录等。

8.Image preview

Image preview是一个支持实时预览图片的插件。当你的鼠标"hover"在有图像路径的代码行上，该插件就会显示一个预览窗口，直接显示图像。该插件支持各种常见的图像格式，如JPG、JPEG、PNG、BMP、GIF和SVG等。

9.Tailwind CSS IntelliSense

Tailwind CSS IntelliSense 提供了对 Tailwind CSS 的智能提示和自动补全功能，可以帮助开发者更快地编写 CSS 样式代码，减少输入错误和提高工作效率。

10.Path Intellisense

Path Intellisense 提供了路径自动补全功能，可以帮助开发者更快地输入文件路径和文件名，减少输入错误和提高工作效率