一、测试环境

G:\Users\M>vue -V
@vue/cli 4.2.3

二、 Vue-Cli4.x生成项目

生成项目的配置

image.png image.png

三、安装插件

• Vetur

etur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass和TypeScript

image.png

• ESLint

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。

image.png

• Prettier

Prettier是一个固执的代码格式化程序，它支持很多。。。。

image.png

四、配置

• .eslintrc.js

在.eslintrc.js可以看到总体的eslint规则合并了vue、eslint和prettier的一些插件库进行语法分析(eslint针对js,vue、prettier针对js、html和css,这里eslint和prettier的一些冲突已经处理)

image.png

• .prettierrc

在文件根目录下创建.prettierrc对prettier格式化进行自定义规则设置，以下为我添加的规则

{
 /* 单引号包含字符串 */
 "singleQuote": true,
 /* 不添加末尾分号 */
 "semi": false,
 /* 在对象属性添加空格 */
 "bracketSpacing": true,
 /* 优化html闭合标签不换行的问题 */
 "htmlWhitespaceSensitivity": "ignore"
}

• setting.json

在用户设置添加自定义设置

{
    "workbench.colorTheme": "Default Light+",
    "editor.codeActionsOnSave": {
        // 自动修复
        "source.fixAll": true
    },
    /* 关闭编辑器自带保存格式化功能，此功能会用Vetur进行格式化。*/
    "editor.formatOnSave": false
}