前言最近在搭建项目框架。想到之前项目的不同代码风格，想在新项目中引入Eslint，规范团队成员的代码风格，保持统一，方便大家维护代码，减少不必要的错误。前端应用越来越复杂，代码规范问题必须通过强制的方式保持统一。以下是团队逐渐摸索的一些配置，各取所需。Eslint配置在用vue-cli3搭建项目的过程中，会询问是否需要Eslint，选择即可。如果后面不选择加入eslint，可以手动安装Eslint的依赖。安装npminstalleslinteslint-plugin-vue--save-dev注意：Node.js(>=6.14)，npm版本3+。创建Eslint配置文件在项目根目录新建一个文件，命名为.eslintrc.js。以下是个人的一些配置，大家可以自行参考。module.exports={root:true,env:{browser:true,node:true,es6:true},extends:["eslint:recommended","plugin:vue/essential","@vue/prettier"],规则：{“generator-star-spacing”：“off”，“no-console”：process.env.NODE_ENV===“production”？“警告”：“关闭”，“无调试器”：process.env.NODE_ENV===“生产”？“警告”：“关闭”，“vue/no-parsing-error”：[2，{“unexpected-solidus-in-tag”：false}]}，parserOptions：{解析器：“babel-eslint”，ecmaVersion：7、sourceType:"module",ecmaFeatures:{//添加ES特性支持，使其能够识别ES6语法jsx:true}}};如果某些文件不需要Eslint验证，则忽略Eslint验证，可以配置一个.eslintignore，其中包含需要排除的文件。/build//config//dist//*.js/test/unit/coverage/stylelint配置stylelint可以帮助我们规范css书写，统一样式，减少错误。安装依赖npmi-Dstylelintstylelint-config-standardstylelint-webpack-plugin配置在项目根目录新建配置文件.stylelintrc.js，相关配置如下：module.exports={extends:"stylelint-config-standard",rules:{"color-no-invalid-hex":true,"rule-empty-line-before":null,"color-hex-length":"long","color-hex-case":"lower","unit-whitelist":["em","rem","%","s","px"],"declaration-colon-newline-after":null}};代码美化prettier配置虽然借助Eslint来提升代码质量，但并不能保证代码风格统一。统一的代码风格对于团队来说是非常有价值的，所以为了达到目的，我们在保存和提交代码的时候使用Prettier将代码修改成统一的风格。安装依赖npmi-Dprettier@vue/eslint-config-prettierConfiguration相关配置写在.eslintrc.jsextends:["eslint:recommended","plugin:vue/essential","@vue/prettier"]我用的是vscode编辑器，同时配置vscode。{"eslint.autoFixOnSave":true,"eslint.validate":["javascript",{"language":"vue","autoFix":true},"html","vue"],"editor.wordWrap":"wordWrapColumn","editor.formatOnSave":true,"vetur.validation.template":false,"cSpell.ignoreWords":["menu","mixins"]}建议使用vscode的同学安装eslint和Prettier-Code这两个插件，formatter，配合上面的配置，达到保存时自动格式化和校验的目的。提交时验证安装两个工具husky：一个方便处理pre-commit、pre-push等githooks的工具lint-staged：对于git暂存区的代码，运行linters工具npmilint-stagedhusky-Dpackage添加配置到.json..."husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,jsx,vue}":["prettier--tab-width2--write","vue-cli-servicelint--fix","gitadd"]}...这样就可以实现验证时submitting，保证不会提交错误的代码。目前项目已经集成了Eslint校验、prettier美化代码、提交hooks代码检查。参考Eslintstylelintstylelint指南
