基于vue/cli3.0+脚手架搭建Vue项目(10)

---

---

前言

为了更好的统一项目的代码风格，因此在编写时就可以使用eslint+prettier，它们不仅能方便代码编写，还能避免不必要的错误，让代码变得更加严谨。
因为每个人可能设置的规则不一，因此我们就使用它们统一推荐的默认规则。

---

一、eslint，prettier依赖的安装

需要注意的是，各依赖包之间的版本有一定的关联，版本有误，启动或者修复时会报错提示，因此可以选择如下各版本：

npm i eslint@7.32.0 eslint-config-prettier@7.0.0 eslint-loader@4.0.2 eslint-plugin-prettier@3.4.1 eslint-plugin-vue@8.7.1 babel-eslint@10.1.0 prettier@2.6.2 -D

二、eslint，prettier规则配置

1. 项目根目录新建.eslintrc.js文件，.eslintignore文件，.prettierrc文件，.prettierignore文件

.eslintrc.js代码：(tip:具体规则可参考http://eslint.cn/docs/rules/，这里我们使用推荐的统一规则)
需要特别注意一下：parserOptions里设置了一个parser: "babel-eslint"用来解析es6语法

module.exports = {
    root: true,
    env: {
      node: true,
      es6: true,
      browser: true
    },
    parser: "vue-eslint-parser",
    parserOptions: {
      sourceType: 'module',
      parser: "babel-eslint"
    },
    extends: ['eslint:recommended', "plugin:prettier/recommended"],
    rules: {
    //   'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //   'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      //强制使用单引号
      // quotes: ['error', 'single'],
      //强制不使用分号结尾
      semi: ['error', 'always'],
      // 缩进风格
      indent: ["error", 2],
    },
  }

.eslintignore代码：(tip:.eslintignore是默认会忽略node_modules文件夹的，这里不做忽略，文件暂时让它空着)

.prettierrc代码：(tip:prettier的全部规范只有十来个，详情可参考https://www.prettier.cn/docs/options.html）

{
  "printWidth": 120,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "tslintIntegration": false
}

.prettierignore代码：

node_modules
dist
src/assets
package-lock.json

2. 在vue.config.js文件配置rules

仅以校验src/views目录下的文件为例：(tip:代码打包发版前记得注释一下)

module.exports = defineConfig({
  //其他配置...
  lintOnSave: true,
  configureWebpack: (config) => {
    config.module.rules.push(
      {
        test: /\.(js|vue)$/, // both .js and .vue
        enforce: 'pre',
        loader: 'eslint-loader',
        include: [path.resolve(__dirname, 'src/views')],
        options: {
          fix: true
        }
      }
    )
  }
})

三、重启Vscode验证效果

ctrl+s前的效果：

ctrl+s后的效果：

---

总结

既然参与，就全情投入。