遵循 eslint 规则

vue-cli 默认的 eslint 标准规则中是 2 个空格缩进,并且在 *.vue 文件中的标签第一个子集是没有缩进的。这里做一些修改和适配:

改为 4 个空格缩进

修改编辑器配置文件 .editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 4
trim_trailing_whitespace = true
insert_final_newline = true

修改 eslint 配置文件 .eslintrc.js

// ... 其他配置
rules: {
    // ... 其他配置
    'indent': ['error', 4]
},

应用 eslint 校验规则

先打开代码质量检查选项:

粘贴图片

.eslintrc.js 内右击 Apply ESLint Code Style Rule:

粘贴图片

webstrom 修改部分标签不缩进第一层

粘贴图片

这样的话在代码格式化之后就不会出现第一层缩进了

粘贴图片

组件 UI 支持

如果你的项目里使用到了 element-ui,那么需要安装 element 插件来更好的支持语法提示与补全

粘贴图片

这个时候会在 Live Templates 里生成 element 的动态模板

粘贴图片

但是这个时候我们写的组件却会提示 Unknown html tag el-button,这时候只需要点击 添加为自定义 html 标签即可

粘贴图片

可以看到每个组件的相关配置

粘贴图片

end

0 条评论
作者
状态
标签
二维码
目录