vue cli选择lint模式


选择代码检测和格式化方案


选择Linter / Formatter配置:
选项:
  ESLint with error prevention only  // 仅错误预防
  ESLint + Airbnb config  // Airbnb配置
  ESLint + Standard config // 标准配置
  ESLint + Prettier // 附带Prettier

应用了 ESLint 后,通常是需要自己来配置繁杂的 rules 规则。
这也是一个喜好类的东西,多数人是不愿意在这上面耗费太多精力的,比如手动配置数百个ESLint 规则。
于是github 上出现了一些开源的代码规范库,比较流行的有 airbnb、standard、prettier等。
相比之下大家都推荐Prettier预设规范,配置更少,用起来更舒服。
来看看不同的模式的选择,进而生成不同的配置文件.eslintrc.js

仅错误预防
只检测错误

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

Standard风格
生成Standard编码规范

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

Prettier 风格
生成Prettier 编码规范

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

Airbnb风格
独角兽公司 Airbnb 的前端编码规范

选择何时进行代码检测

Pick additional lint features: 
  Lint on save // 保存就检测
  Lint and fix on commit // fix和commit时候检查

参考

使用 Eslint & standard 规范前端代码:https://www.cnblogs.com/zhoumingjie/p/11582862.html
各种lint预设pk:https://www.npmtrends.com/eslint-config-airbnb-vs-prettier-vs-standard
为什么推荐使用prettier:https://blog.csdn.net/qq_21567385/article/details/109136668
我为什么推荐Prettier来统一代码风格:https://blog.csdn.net/Fundebug/article/details/78342784
Vue CLI 3.0 文档:https://www.bluesdream.com/blog/vue-cli-3-document-install-and-create.html
ESLint 与 Prettier配合使用:https://segmentfault.com/a/1190000015315545


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM