【进击的Vue(二)】手动eslint配置、自定义环境配置

不要让自己的底限成为你的上限

前言

上篇文章讲了vue全家桶的搭建，但是并没有进行多重环境的区分。除了开发和正式环境还有可能测试环境等等。

eslint保证了在项目开发过程中团队开发的一致性，并且也能避免日常开发中的错误；区分环境的目的就是为了让开发人员在开发的过程中可以方便调试，保持高效的开发。

eslint初始化

安装eslint

首先需要安装全局的eslint

npm i eslint -g

然后在项目中安装所需要的插件

npm i eslint eslint-loader -D

初始化eslint

eslint --init

初始化时候的一些问题：

• 你想什么时候使用eslint？ 检查并发现问题。
• 项目使用哪种模块？JavaScript modules (import/export)。
• 项目使用什么框架？vue.js。
• 项目是否使用了typescript？没有。（暂时用不上，后期会出更换ts的文章）
• 代码在哪里运行？浏览器。
• 你想要配置文件的格式是什么？JavaScript。（这个自己选，可以选yaml，json）

eslint-plugin-vue@latest

• 你想要现在安装依赖吗？是。（用于vue的eslint-plugin-vue的最后一个版本）

初始化完毕之后项目根目录会出现一个.eslintrc.js的文件，这个就是eslint的配置文件了。

注意这时候项目多个文件可能会报错，比如(require、module.export等)，是因为我们选择了js modules。修改一下配置文件就可以了。贴一下我的配置文件。

// .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/essential'
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: ['vue'],
  // http://eslint.cn/docs/rules/
  rules: {
    quotes: [1, 'single'],
    semi: 2,
    'no-irregular-whitespace': 2,
    'no-undef': 0,
    'eol-last': 1, // 文件以单一的换行符结束
    'block-scoped-var': 2, // 块语句中使用var
    'comma-dangle': [2, 'never'], // 是否允许对象中出现结尾逗号
    'no-dupe-keys': 2, // 不允许出现重复的key
    'no-empty': 2, // 不允许出现空的代码块
    'no-extra-semi': 2, // 不允许出现不必要的分号
    'no-multiple-empty-lines': [1, { 'max': 1, maxEOF: 1 }],
    'no-trailing-spaces': 2, // 一行最后不允许有空格
    'semi-spacing': [2, { 'before': false, 'after': true }], // 强制分号之前和之后使用一致的空格
    'no-unreachable': 1, // 止在return、throw、continue 和 break 语句之后出现不可达代码
    'space-infix-ops': 1, // 要求操作符周围有空格 bad: const a= 1;
    'spaced-comment': 1, // 强制在注释中 // 或 /* 使用一致的空格
    'no-var': 2, // 要求使用 let 或 const 而不是 var bad: var a = 1;
    'no-multi-spaces': 2, // 禁止使用多个空格 bad: \n\n\n
    'array-bracket-newline': 1, // 在数组开括号后和闭括号前强制换行 bad: [\r\n 1 \r\n];
    'camelcase': 1, // 强制使用骆驼拼写法命名约定
    'comma-spacing': 1, // 强制在逗号前后使用一致的空格 bad: [1,2 ,3, 4];
    'space-before-function-paren': ['error', 'never'] // 要求或禁止函数圆括号之前有一个空格
  }
};

配置完毕之后会出现很多error和warning，这时候在package.json中增加一条自动修复的命令。

  "scripts": {
    "serve": "webpack-dev-server --config webpack.config.js --hot --mode development",
    "build": "webpack --config webpack.config.js --mode production",
+   "lint": "eslint --fix --ext .js --ext .vue src"
  }

执行命令npm run lint直接修复src目录下的所有内容。

安装stylelint

stylelint支持在 Vue 单文件组件的样式部分的代码校验。

npm i -D stylelint-webpack-plugin

然后在webpack.config.js中修改

// webpack.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  // ... 其它选项
  plugins: [
    new StyleLintPlugin({
      files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
    })
  ]
}

环境初始化

贴合vuecli3+的环境模式，直达：github.com/vuejs/vue-c…。具体的细节可以看看其他的文章，这里不多赘述。

vuecli3+的环境参数以文本的方式储存在项目根目录，然后正则的方式切割换行符，并过滤掉非VUE_APP_的key值，然后以key=value的方式储存进process.env全局的环境中。

安装cross-env

cross-env是一个跨平台通过命令行设置参数的一个库。

npm i cross-env -D

修改package.json中的命令

  "scripts": {
-    "serve": "webpack-dev-server --config webpack.config.js --hot --mode development",
-    "build": "webpack --config webpack.config.js --mode production",
+    "serve": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js --hot",
+    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js --mode production",
    "lint": "eslint --fix --ext .js --ext .vue src"
  }

需要注意的是，cross-env key=value需要放在命令行的最前面，否则会报错。如果需要多个参数，直接在后面追加key=value key=value，参数直接空格隔开。

创建文件获取参数并储存全局process.env的值

在项目根目录下创建一个文件夹bin，创建文件loadEnv.js，这个文件用来获取参数并读取环境文本文件。

const fs = require('fs');

const nodeEnv = process.env.NODE_ENV || 'production';
const envContent = fs.readFileSync(`.env.${nodeEnv}`, 'utf-8');
const sptEnvCont = envContent.split('\r\n');

let env = {};

for (const value of sptEnvCont) {
  try {
    const sptValue = value.split('=');
    env[sptValue[0]] = sptValue[1];
  } catch (error) {
    console.error(error);
  }
}

module.exports = env;

创建几个环境文件如下

测试环境样例如下

修改webpack.config.js文件

修复loadEnv.js中导出的环境参数在webpack.config.js中异常问题。

引入webpack.DefinePlugin函数，把

const webpack = require('webpack');
const env = require('./bin/loadEnv');
// ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        ...env
      }
    })
  ]
// ...

重启项目然后在页面中测试

console.log(process.env.APP_TEXT);

现在测试一下测试环境，也就是.env.test，修改package.json。

  "scripts": {
    "serve": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js --hot",
+    "test": "cross-env NODE_ENV=test webpack-dev-server --config webpack.config.js --hot",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js --mode production",
    "lint": "eslint --fix --ext .js --ext .vue src"
  }

运行npm run test，可以看到也是成功增加了测试环境。

自定义环境完毕！

文章到这里就结束，vue项目搭建会上传到GitHub，需要的朋友可以自行拉取，后面的文章会以此为基础。如果有需要优化的地方或者有更好的建议可以在评论区留言（假装很多人看）。
Github仓库：github.com/heiyehk/web…
代码分支在: /tree/dev/20200617-eslint&environment