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