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

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

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

基本配置

• 在编译器 文件 >> 首选项 >> 设置，能够拷贝相面的选项后搜索相关配置
• 设置制表符等于空格数为 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
复制代码

必要的插件

marketplace.visualstudio.com/

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

"prettier.eslintIntegration": true,
复制代码

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

"prettier.stylelintIntegration": true
复制代码

Vetur：vue 开发工具，增长如下配置 vuejs.github.io/vetur/forma…

"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 会自动处理一些语法问题