前端项目配置eslint+vscode代码格式化（一）

背景

编码的黄金法则: 不管有多少人参与同一个项目，一定要确保每一行代码都像是同一个人编写的。

Every line of code should appear to be written by a single person, no matter the number of contributors.

这就需要在一个项目中，我们永远遵循同一套编码规范。在项目开发前，制定一套行之有效的编码规范，每个项目组成员都要按这个规范来编码。而且目前公司的整个产品线产品众多，更应该有一个公共、统一的代码检查及格式化标准。加上公司统一的前端代码规范来约束整个前端研发过程；因为人的行为自己是没办法进行很好的自我统一约束的；都有个人的风格；基于该背景整理一套统一检查、代码格式化配置规范。

安装eslint依赖

npm install eslint --save-dev
 or
yarn add eslint --dev
 or
pnpm install eslint --save-dev

执行eslint命令行

到这一步开始安装eslint-plugin-vue@latest eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 || ^5.0.0等依赖

生成.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ['plugin:vue/essential', 'standard'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: ['vue'],
  rules: {
    indent: 'off',
    'space-before-function-paren': 0,
    'vue/multi-word-component-names': 0,
    camelcase: 0,
    'vue/return-in-computed-property': 0,
    semi: ['error', 'always']
  }
};

前端项目配置eslint+vscode代码格式化（二）