在写Vue & TypeScript 初体验相关的示例代码时, 在VS Code保存时总能不自动格式化代码, 所有的出错都得自己手工处理(没养成良好的编码习惯), 很是麻烦, 于是想着怎么解决这个问题.
前提条件
1. VS Code插件
- ESlint, Javascript代码检测工具，可以配置每次保存时格式化js，但每次保存只格式化一点点，需连续按住多次保存才能格式化好所有代码.
- Vetur, 可格式化html、css、js、vue文件
- Prettier - Code formatter, 只关注格式化，并不具有eslint检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown等.
2. VS Code settings.json配置
当前使用的配置是
{
"files.autoSave": "off",
"files.autoSaveDelay": 1000,
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"eslint.autoFixOnSave": true,
"prettier.semi": true, //去掉代码结尾的分号
"prettier.singleQuote": true, //使用带引号替代双引号
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" //属性强制折行对齐
}
},
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"eslint.options": {
"plugins": ["html"]
},
//为了符合eslint的两个空格间隔原则
"editor.tabSize": 2,
"eslint.enable": true,
"workbench.colorTheme": "Solarized Light",
"vetur.format.defaultFormatter.ts": "vscode-typescript",
"vetur.format.defaultFormatter.css": "prettier",
"prettier.disableLanguages": [],
"prettier.tabWidth": 4,
"files.associations": {
"*.wpy": "vue"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"breadcrumbs.enabled": true,
"vsicons.dontShowNewVersionMessage": true
}
3. 依赖包
需安装eslint, 不建议使用全局的方式安装, 这样无法保证项目成员所有人能够开箱即用.
yarn add eslint --dev
yarn add eslint-friendly-formatter --dev
yarn add eslint-plugin-html --dev
yarn add eslint-plugin-vue --dev
4. 排错
如果安装好各种插件和依赖后, 依赖无法自动格式化好代码, 可以尝试以下步骤:
- 重启VS Code
- 重新运行本地开发服务器
- 查看VS Code中运行的任务ESlint的输出是否有出错, 如果有, 请按提示处理. 如下图所示:
说明缺少eslint-plugin-html依赖包(可能是忘安装了), yarn add eslint-plugin-html --dev安装下即可.
