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
