vue3项目vscode Eslint配合Prettier代码规范配置
2023-12-14 10:59:12
vue3的项目和vue2的项目代码规范不同,vue3中的具体配置如下:
1.vue创建的时候选择elslint和prettier都选择。
2.vscode安装eslint插件
3.在VS code的配置增加如下自动修复代码:
{
"workbench.colorTheme": "Default Dark Modern",
// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"editor.formatOnSave": false
}
4.配置项目根目录下面.eslintrc.cjs文件下面增加rules选项:
rules: {
// prettier专注于代码的美观度(格式化工具)
// 前置:
// 1.禁用格式化插件 prettier format on save 关闭
// 2.安装Eslint插件,并配置保存时自动修复
'prettier/prettier': [
'warn',
{
singleQuote: true, // 单引号
semi: false, // 无分号
printWidth: 80, // 每行宽度至多80字符
trailingComma: 'none', // 不加对象|数组最后逗号
endOfLine: 'auto' // 换行符号不限制(win mac 不一致)
}
],
// ESLint关注于规范,如果不符合规范,报错
'vue/multi-word-component-names': [
'warn',
{
ignores: ['index'] // vue组件名称多单词组成(忽略index.vue)
}
],
'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验(props解构丢失响应式)
// 💡 添加未定义变量错误提示,create-vue@3.6.3 关闭,这里加上是为了支持下一个章节演示。
'no-undef': 'error'
}
至此,代码规范配置完成,如果没有立即生效,可以尝试重启vscode。
文章来源:https://blog.csdn.net/m0_45925246/article/details/134988250
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!