webstrom 与 vue-cli 创建工程的适配

Question

遵循 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 标签即可

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