首先设置vscode的setting.json
{
"window.zoomLevel": 0,
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true
},
"html",
"vue"
],
"editor.fontSize": 16,
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.format.defaultFormatterOptions": {
"prettier": {
// Prettier option here
"tabWidth": 2,
"semi": false,
"singleQuote": true
}
},
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"files.autoSave": "onFocusChange",
"vetur.format.defaultFormatter.html": "prettier",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
}
}
其次安装vetur,eslint插件

文章图片

文章图片
安装eslint-plugin-vue
yarn add eslint-plugin-vue --dev
更改.eslinttrc.js 添加vue选项

文章图片
【统一前端代码风格】
推荐阅读
- JS持续更新中
- 面试大厂,手写代码这些就够了,附 codepen 地址!
- JavaScript|打了BOM,来了DOM()
- JavaScript|什么,BOM指的是物料清单()
- javascript|Vue2 原理浅谈
- 前端面试总结|vue核心面试题(vue中模板编译原理)
- Vue|Vue2的核心原理剖析
- JavaScript页面运行时构成过程
- python杂记|python如何执行js代码,学会这两个库就够了