【工具】项目添加ESLint配置

目录

• 安装包
• 升级babel
• 更换 .babelrc 文件为 babel.config.js
• 添加 .eslintrc.js 文件
• 修改package.json
• 常见问题及解决方案

安装包

npm i -D eslint @babel/eslint-parser @babel/eslint-plugin @ecomfe/eslint-config eslint-plugin-vue husky@4.3.8 lint-staged

升级babel

npx babel-upgrade --write --install

更换 .babelrc 文件为 babel.config.js

// 项目目录下运行
mv .babelrc babel.config.js

// 文件内容也要更改：
module.exports = {
  // 原 .babelrc 的内容
}

添加 .eslintrc.js 文件

module.exports = {
    extends: [
        '@ecomfe/eslint-config',
        '@ecomfe/eslint-config/vue',
    ],
};

修改package.json

{
  "name": "xxx",
  ...,
  "dependencies": {},
  "devDependencies": {},

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "eslint --fix"
    ]
  }
}

常见问题及解决方案

如果你还有问题，尝试看看这篇文章。 https://blog.csdn.net/c183662101/article/details/106363055
注意点
1、使用Babel升级工具注意以下操作：
package.json 中移除了旧版本的依赖，自动新增了新版名称，.babelrc 文件的配置也会自动修改，但是不会删除已有的插件。

rm -rf node_modules
yarn install

2、处理 Cannot find module babel-plugin-syntax-jsx 异常
babel-plugin-transform-vue-jsx中使用的包是babel-plugin-syntax-jsx，而babel-upgrade将这个包升级成了@babel/plugin-syntax-jsx

yarn remove @babel/plugin-syntax-jsx
yarn add -D babel-plugin-syntax-jsx

3、处理 Can’t resolve ‘babel-polyfill’
babel-polyfill已经升级成了@babel/polyfill，需要将项目中的引入依赖换成@babel/polyfill