Vite Vue3項目eslint配置遇到的問題

問題一：vite項目無法使用vue/airbnb

創建了一個Vite Vue3 ts項目，eslint配置采用@vue/airbnb，然而eslint卻不生效。

module.exports = { 
    extends: [
        'plugin:vue/vue3-essential',
        '@vue/airbnb',
        '@vue/typescript/recommended',
      ],
}

查看eslint日志，發現報錯了

Error: Cannot find module '@vue/cli-service/webpack.config.js'

原來 @vue/eslint-config-airbnb是專門為vue cli設計的，它依賴@vue/cli-service，所以vite項目不能使用。

解決方法，參照@vue/eslint-config-airbnb，修改自己的配置

查看了@vue/eslint-config-airbnb源碼，發現它是擴展了airbnb-base，重寫了'import/extensions'和'no-param-reassign'規則

• import/extensions，導入js,mjs,jsx,ts,tsx模塊時可以不寫后綴名
• no-param-reassign， 允許修改state，acc，e參數的屬性
  另外還添加了'import/resolver'和'import/extensions'的settings。

vue/eslint-config-airbnb/index.js

module.exports = {
  extends: [
    require.resolve('eslint-config-airbnb-base'),
  ],
  settings: {
    'import/resolver': {
      // https://github.com/benmosher/eslint-plugin-import/issues/1396
      [require.resolve('eslint-import-resolver-node')]: {},
      [require.resolve('eslint-import-resolver-webpack')]: {
        config: require.resolve('@vue/cli-service/webpack.config.js'),
      },
    },
    'import/extensions': [
      '.js',
      '.jsx',
      '.mjs',
      '.ts',
      '.tsx',
    ],
  },
  rules: {
    'import/extensions': ['error', 'always', {
      js: 'never',
      mjs: 'never',
      jsx: 'never',
      ts: 'never',
      tsx: 'never',
    }],
    'no-param-reassign': ['error', {
      props: true,
      ignorePropertyModificationsFor: [
        'state', // for vuex state
        'acc', // for reduce accumulators
        'e', // for e.returnvalue
      ],
    }],
  },
};

參考@vue/eslint-config-airbnb源碼修改了我的eslint配置

module.exports = {
    extends: [
        'plugin:vue/vue3-recommended',
        '@vue/typescript/recommended',
        'airbnb-base',
      ],
    rules: {
        'import/extensions': ['error', 'always', {
          js: 'never',
          mjs: 'never',
          jsx: 'never',
          ts: 'never',
          tsx: 'never',
        }],
        'no-param-reassign': ['error', {
          props: true,
          ignorePropertyModificationsFor: [
            'state', // for vuex state
            'acc', // for reduce accumulators
            'e', // for e.returnvalue
          ],
        }],
}

結果發現導入ts模塊時會報import/no-unresolved錯誤，另外import/extensions也沒有生效。

問題二：無法識別ts模塊

解決辦法：

• 安裝 eslint-import-resolver-typescript

npm i -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

• 修改.eslintrc.js配置文件, 添加如下配置。

plugins: ['import'],
  settings: {
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      typescript: {
        // always try to resolve types under `<root>@types`
        // directory even it doesn't contain any source code, like `@types/unist`
        alwaysTryTypes: true,

        // Choose from one of the "project" configs
        // below or omit to use <root>/tsconfig.json by default

        // use <root>/path/to/folder/tsconfig.json
        project: '/',
      },
    },
  },

最終的eslint配置

module.exports = {
  env: {
    node: true,
    browser: true,
    es2021: true,
    jest: true,
  },
  extends: [
    // 'eslint:recommended',
    'plugin:vue/vue3-recommended',
    '@vue/typescript/recommended',
    'airbnb-base',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ['import'],
  settings: {
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      typescript: {
        // always try to resolve types under `<root>@types`
        // directory even it doesn't contain any source code, like `@types/unist`
        alwaysTryTypes: true,

        // Choose from one of the "project" configs
        // below or omit to use <root>/tsconfig.json by default

        // use <root>/path/to/folder/tsconfig.json
        project: '/',
      },
    },
  },
  rules: {
    'import/extensions': ['error', 'always', {
      js: 'never',
      mjs: 'never',
      jsx: 'never',
      ts: 'never',
      tsx: 'never',
    }],
    'no-param-reassign': ['error', {
      props: true,
      ignorePropertyModificationsFor: [
        'state', // for vuex state
        'acc', // for reduce accumulators
        'e', // for e.returnvalue
      ],
    }],
  },
};