# vue-cli创建vue2项目配置airbnb-eslint

为了同一代码规范，于是选择airbnb的esint来统一项目的代码，以下为简单记录

# 创建项目📖

//全局安装vue-cli
yarn global add @vue/cli

//创建自定义项目模板，这一步可以直接加入airbnb的配置
vue create vue2_demo

ds7Nno

# 启动项目

yarn run dev直接启动项目,需要我们手动配置的东西不多,eslint-airbnb其实也已经安装好了

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 自己加的规则
    quotes: [2, 'double'],
    indent: [2, 4]
  },
};

WARNING

以下开始踩坑

我们打开src/views/components目录下的Home.vue文件,如下<script>部分:

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
    name: "Home",
    components: {
        HelloWorld,
    },
};
</script>

在这里使用了alias定义了@ -> /src目录,在已有的项目配置文件是里面是无法找到@的定义在哪,于是根据vue-cli (opens new window)官方文档,猜测是node_modules/@vue/cli-service/webpack.config.js默认生成的alias @

运行

vue inspect > output.js

查看output.js大概19行附近可以搜索alias关键字我们可以看到默认生成的配置文件里面是有@的,接下来我们开始定义自己的alias ajqgdY

# 自定义alias

# 增加配置

从vue-cli (opens new window)文档中我们不难找到增加alias的方法----通过configureWebpack或者chainWebpack来配置最终生成的webpack config

项目根目录创建vue.config.js文件配置vue-cli

const path = require("path");

module.exports = {
    chainWebpack: (config) => {
        config.resolve.alias
            .set("comp", path.resolve(__dirname, "src/components"));
    },
};

# 检查新增配置是否写入

再次运行,查看生成的output.js,可以看到确实增加了一个新的alias

vue inspect > output.js

JNRslF

# 查看alias是否生效

替换掉之前的@/components为comp,已经可以看到eslint报错了,项目可以正常启动,组件引入也正常

错误信息: ESLint: Unable to resolve path to module 'comp/HelloWorld.vue'.(import/no-unresolved)

XQs6DX

# 查找解决报错的办法

通过查询关键字vuecli/eslint/alias,最后得出:

在node_modules/@vue/eslint-config-airbnb/index.js里面已经写好了解决方案,其实已经做好了alias的处理:

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.config.js里面配置的alias也已经正确的写入了webpack的配置中,只是编辑器的eslint没有按照想法区热更新规则并正确显示,而且只是eslint没有正确更新,vue编译是可以通过的证明是可以找到alias的路径并指向的,所以我们只需要:

vscode: ctrl+shift+p -> reload Window
webstorm: File -> invalidate caches/restart

虽然解决办法看起来就这? 但是实际查询过程中却是十分痛苦的过程,尝试了网上最常见的eslint-import-resolver-webpack和eslint-import-resolver-alias配置解决方案,但是我似乎没有看到一篇文章告诉我其实只需要直接重启就完事了

← 📚踩坑之路