eslint-config
品牌广告团队前端代码规范
创建配置文件
在你的项目根目录下创建 .eslintrc.js,并将以下内容复制到文件中:
moduleexports = extends: '@mfw/eslint-config' globals: // 这里填入你的项目需要的全局变量 // 这里值为 false 表示这个全局变量不允许被重新赋值,比如: // // jQuery: false, // $: false rules: // 这里填入你的项目需要的个性化配置,比如: // // // 一个缩进必须用两个空格替代 // 'indent': [ // 'error', // 2, // { // SwitchCase: 1, // flatTernaryExpressions: true // } // ] ;
@mfw/eslint-config 集成了标准 javascript, vue, react, typescript 代码规范,使用方式如下:
- 标准 javascript 规则
yarn add eslint eslint-plugin- //修改 .eslintrc.js extends 属性为 extends: '@mfw/eslint-config'
- 使用 vue 规则
yarn add eslint eslint-plugin- //修改 .eslintrc.js extends 属性为 extends: '@mfw/eslint-config/vue'
- 使用 React 规则
yarn add eslint eslint-plugin- //修改 .eslintrc.js extends 属性为 extends: '@mfw/eslint-config/react'
- 使用 typescript 规则
yarn add eslint eslint-plugin- //修改 .eslintrc.js extends 属性为 extends: '@mfw/eslint-config/typescript'
高级用法
yarn add husky -D // package.json 添加 "husky": "hooks": "pre-commit": "npm run lint" "pre-push": "npm run lint:fix" "...": "..."
安装 husky 使用 git hooks ,在 commit 操作执行之前, 程序会自动运行配置格式化命令npm run lint
, 这样提交的代码就可以保证是干净的了.
setup vscode
首先安装 Eslint 插件, 然后修改 setting.json
// setting.json 添加 "eslint.validate": "language": "javascript" "autoFix": true "language": "vue" "autoFix": true