vue记录---使用eslint进行规范约束

一、配置

1. 创建项目时进行配置（方式一）：

1.1 创建vue项目

vue create <项目名>

1.2 选中自定义配置

> Manually select features

1.3 勾选‘Linter / Formatter’

(*) Linter / Formatter

1.4 在选择lint配置时，选择ESLint + Prettier

> ESLint + Prettier

1.5 之后会让选择在什么时候进行约束，建议全选。

(*) Lint on save
(*) Lint and fix on commit

• tips:

1、不勾选lint on commit：
*   提交时，代码有格式问题，可以提交。
*   提交时，代码本身语法存在问题，可以提交。
2、勾选lint on commit：
*   提交时，代码有格式问题，会自动帮我们修改为符合规范之后再提交。
*   提交时，代码本身语法存在问题，提交会报错，不可以提交。

1.6 然后会让你选择在哪进行配置‘ Babel, ESLint’，根据个人喜好，推荐专用配置文件中。

> In dedicated config files

之后静待安装完成即可。

2.通过npm进行安装时配置（方式二）：

待补充..........

4. 补充

1.1 通过方式一进行安装之后，可在.eslintrc.js进行详细配置。
1.1.1 修改eslint中eslint-plugin-vue的类别。

- extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], 
+ extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"], 

1.1.2 配置出现警告或错误时，在页面中也能显示。

module.exports = {
  devServer: {
    // 当出现编译错误或警告时，在浏览器中显示全屏覆盖。
    overlay: {
      errors: true,
      warnings: true,
    },
  },
};