给vue3项目添加eslint校验,eslintignore

2021-12-15  本文已影响0人  有一个程序媛

1.引入规范性.eslintrc.js,以下我只是举个例子
airbnb-base是校验规则比较强的插件,你可以选择性需要或者不需要

module.exports = {
  extends: ['plugin:vue/vue3-essential', 'airbnb-base'],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ['vue'],
  parser: 'vue-eslint-parser',
  env: {
    browser: true,
    node: true,
    es6: true
  },
  rules: {
    // 自己写一些想配置的规则
  },
  overrides: [{
    files: ['*.vue', '*.jsx', '*.js'],
    rules: {
      // 这里写覆盖vue文件的规则
    },
  }],
}

2.package.json中添加以下,然后npm install

"devDependencies": {
    "eslint": "^7.27.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-html": "^6.2.0",
    "eslint-plugin-import": "^2.23.3",
    "eslint-plugin-vue": "^7.9.0",
    "vite-plugin-eslint": "^1.3.0",
  }
}

3.vite.config.js中添加
cache设为false表示不做eslint缓存,如果你有eslint报错,然后改好之后还报同样的错,就跟没改一样没有效果,就可以添加cache: false,删掉缓存,页面及时更新

import eslintPlugin from 'vite-plugin-eslint';
  plugins: [
    eslintPlugin({
      cache: false
    })
  ]

4.根目录下新建文件.eslintignore,里面写上你需要忽略的文件,不走eslint校验,一般用于引入的第三方插件,代码多,格式乱,一般不用走eslint校验,否则改起来也是很麻烦
这里注意:直接src/某某文件夹位置,不能写成/src/

    src/components/thirdPlugins
上一篇下一篇

猜你喜欢

热点阅读