Vs code开发Vue建议插件

以下本人使用VsCode开发 Vue使用的插件，开发起来很方便

Chinese (Simplified) Language Pack for Visual Studio Code

中文简体插件

ESLint

javascript代码检测工具

Vetur

Vue官方提供的VS Code插件

Vue 3 Snippets

基于最新的 Vue 2 及 Vue 3 的 API 的代码块

Prettier - Code formatter

代码格式化工具，支持JavaScript 、TypeScript、JSX 、JSON、CSS 、SCSS 、 Less、HTML 、 Vue等文件格式化，完美匹配Vue-Cli 创建项目中自定义选项“ Pick a linter / formatter config: Prettier”语法

Path Intellisense

文件路径补全工具，可以自定义‘@’到vue的src目录

Auto Close Tag

自动关闭 html/xml标签插件,vue文件也支持

Auto Rename Tag

自动重命名html/xml标签插件,vue文件也支持

IntelliJ IDEA Keybindings

如果习惯了WebStorm快捷键，可以安装此插件

配置 setting.json

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.quickSuggestions": true,
  "eslint.validate": ["javascript", "javascriptreact", "vue", "html"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  }
}

配置prettier.config.js

module.exports = {
  singleQuote: true, // 使用单引号
  printWidth: 150, // 超过最大值换行,可以根据项目实际设置
  htmlWhitespaceSensitivity: 'css', // HTML 空白敏感度
  semi: false, // 结尾不用分号
  jsxBracketSameLine: true, // 多行 JSX 元素的 放在最后一行的末尾，而不是单独放在下一行
  arrowParens: 'always', // 在唯一参数的箭头函数周围包含括号
  vueIndentScriptAndStyle: false, // 是否缩进Vue 文件中的代码<script>和<style>标签。有些人（如Vue 的创建者）不缩进以保存缩进级别，但这可能会破坏编辑器中的代码折叠。
  trailingComma: 'none' // 函数最后不需要逗号
}