vscode+vue+eslint统一风格配置

最新推荐文章于 2024-08-13 16:52:28 发布

nkxrb!

最新推荐文章于 2024-08-13 16:52:28 发布

阅读量393

点赞数

分类专栏： vue 设计规范经验文章标签： visual studio code vue.js

本文链接：https://blog.csdn.net/kw023781/article/details/105825159

版权

本文介绍了如何使用VSCode结合Vue、ESLint和Prettier，实现编码风格的一致性和可读性。通过安装Vetur插件支持Vue文件的智能提示和格式化，并利用ESLint进行编码风格限制和修复，遵循简洁大方的原则，提升开发效率。

摘要由CSDN通过智能技术生成

对于程序员来说，编码风格，习惯决定了工作效率。好的编码风格，可读性强，bug率低。
本着简洁大方的原则，将个人的一些习惯记录下来，也为了能在新环境下快速配置出自己的风格。

vscode+vue+eslint+prettier

2个必备插件：

Vetur：支持vue文件的识别、代码提示、格式化（默认prettier风格）
关于细节的设置方法，可参考Vetur官网进行配置
ESLint：编码风格限制、修复

必要的配置（setting.json文件）

{
   
 	"vetur.format.defaultFormatter.html": "prettier",//对于html的格式化，使用prettier风格
 	"vetur.format.defaultFormatter.js": "vscode-typescript",
 	"vetur.format.defaultFormatter.ts": "vscode-typescript",
 	"vetur.format.options.tabSize": 2,
    "vetur