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。
在文件结尾添加一个空白行。

1{
2  "editor.tabSize": 2,
3  "files.insertFinalNewline": true,
4  "files.eol": "\n",
5  "files.trimTrailingWhitespace": true,
6  "eslint.autoFixOnSave": true,
7  "editor.formatOnSave": true,
8  "eslint.validate": [
9    "javascript",
10    {
11      "language": "vue",
12      "autoFix": true
13    },
14    "html"
15  ],
16  "prettier.stylelintIntegration": true,
17  "prettier.eslintIntegration": true,
18  "vetur.format.defaultFormatter.html": "prettier",
19  "vetur.format.defaultFormatterOptions": {
20    "prettier": {
21      "semi": true,
22      "singleQuote": true,
23      "arrowParens": "always",
24      "trailingComma": "es5"
25    }
26  },
27  "path-intellisense.mappings": {
28    "@/": "${workspaceRoot}/src/"
29  }
30}

增加 .editorconfig 文件

1# editorconfig.org
2
3root = true
4
5[*]
6charset = utf-8
7end_of_line = lf
8indent_size = 2
9indent_style = space
10insert_final_newline = true
11trim_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

1"eslint.validate": [
2    "javascript",
3    "javascriptreact",
4    {
5        "language": "vue",
6        "autoFix": true
7    },
8],
9"vetur.validation.template": false,
10"vetur.format.defaultFormatter.html": "prettyhtml"

处理 prettier 格式化配置

1"vetur.format.defaultFormatterOptions": {
2  "prettier": {
3    "semi": true,
4    "singleQuote": true,
5    "arrowParens": "always"
6  }
7},

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

1settings: {
2  "import/resolver": {
3    webpack: {
4      config: {
5        resolve: {
6          alias: {
7            '@': path.resolve('src'),
8          }
9        }
10      }
11    },
12  },
13},

• 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