Vue 全宇宙最浪 VSCode 配置、插件

image

别人的那一堆配置、插件我就不写了～

首先进入官网下载并安装。

基本配置

• 在编译器 文件 >> 首选项 >> 设置，可以拷贝相面的选项后搜索相关配置
• 设置制表符等于空格数为 2： "editor.tabSize": 2
• 设置文件末尾增加新行："files.insertFinalNewline": true
• 默认换行符："files.eol": "\n
• 保存文件剪切尾随空格："files.trimTrailingWhitespace": true
• 文件字符集编码： "files.encoding": "utf8"

使用配置文件

项目跟路径增加配置文件 .vscode/settings.json

将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差异：

用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。
保存文件时，删除尾部的空白符。
设置文件编码为 UTF-8。
在文件结尾添加一个空白行。

{
  "editor.tabSize": 2,
  "files.insertFinalNewline": true,
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true,
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    "html"
  ],
  "prettier.stylelintIntegration": true,
  "prettier.eslintIntegration": true,
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": true,
      "singleQuote": true,
      "arrowParens": "always",
      "trailingComma": "es5"
    }
  },
  "path-intellisense.mappings": {
    "@/": "${workspaceRoot}/src/"
  }
}

增加 .editorconfig 文件

# editorconfig.org

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

必要的插件

https://marketplace.visualstudio.com/

• Prettier - Code formatter：代码格式化 https://prettier.io/
• htmlhint：html 语法检查 https://github.com/htmlhint/HTMLHint
• ESLint：javascript 语法检查 https://eslint.org/

"prettier.eslintIntegration": true,

• stylelint：css 语法检查 https://stylelint.io/

"prettier.stylelintIntegration": true

Vetur：vue 开发工具，增加以下配置 https://vuejs.github.io/vetur/formatting.html#formatters

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    },
],
"vetur.validation.template": false,
"vetur.format.defaultFormatter.html": "prettyhtml"

处理 prettier 格式化配置

"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "semi": true,
    "singleQuote": true,
    "arrowParens": "always"
  }
},

如果需要，路径 @/component/HelloWorld.vue eslint 解析出错时增加一下配置：

settings: {
  "import/resolver": {
    webpack: {
      config: {
        resolve: {
          alias: {
            '@': path.resolve('src'),
          }
        }
      }
    },
  },
},

• vscode-icons：文件类型 icon
• Path Intellisense：自动路劲补全
• markdownlint：markdown 语法检查
• Settings Sync：编辑器配置、插件不同设备间同步
• Live Server：web 服务器
• vim：vim 方式开发（可选）
• svn：Subversion source control for VS Code
• px2rem：转换 css 样式的 px 为 rem 单位
• sftp：sftp sync extension for VS Code
• Import Cost：测量引入组件包大小，Vue 单文件组件需要增加以下配置：

"importCost.javascriptExtensions": [
    "\\.jsx?$",
    "\\.vue?$"
],

备注

eslint 自动处理语法问题：

Ctrl+Shift+p

输入：eslint:fix all

回车后 eslint 会自动处理一些语法问题

image