Recently made a vue2.0 based project, using VUE-CLI generation. I didn’t support typescript at first, but because of the complex business logic, I wanted to write some utility classes using TS. After adding related dependencies, I found that parser was the biggest problem when configuring ESLint.

1. js parser

Eslint is an AST syntax tree that checks code based on ESTREE. The most common parser is probably @babel/eslint-parser. Because esLint’s default parser only supports old syntactic rule converters, using newer syntactic features requires @babel/ ESLint-parser to parse it into ESTree for ESLint to use. But Babel does support converting JS files, so we need another Parser to support other types of files.

2. vue parser

Vue provides a vue-eslint-parser package to convert the template part of the. Vue file. The script part needs an extra JS /tsparser, which can be specified in parseroption.parser.

3. ts parser

Ts provides a solution for ESLint, where ts can be parsed using @typescript-esLint /parser under the @typescript-esLint org.

4. Problems and choices of TS Parser

Both the @babel/esint-parser and @typescript-esLint /parser documentation mention each other. @babel/esint-parser supports TS parsing, However, ts is not supported using the rules in the @babel/eslint-plugin. It is also mentioned in the @typescript-esLint /parser document and indicates that there are no plans to support using both parsers together.

5. Ts choice in VUE

The additional parser that can be configured in vue-eslint-Parser is intended to parse the contents of script tags, but script tags are intended to be written in JS because of historical baggage. So vue-eslint-parser must be parsed using @babel/ealint-parser.

6. Final selection

After weighing the advantages and disadvantages of all parties, we finally decide to use the most suitable parser, extends and plugin suite for different files, which can be configured with overrides in.eslintrc.js:

const path = require('path');

module.exports = {
  root: true.env: {
    node: true,},globals: {
    window: true.document: true,},settings: {
    'import/resolver': {
      alias: {
        map: [[The '@', path.resolve(__dirname, './src')]],extensions: ['.ts'.'.js'.'.jsx'.'.json'.'.vue'],}}},overrides: [{files: ['*.js'.'*.jsx'].parser: '@babel/eslint-parser'.parserOptions: {
        babelOptions: {
          configFile: path.resolve(__dirname, './babel.config.js'),}},extends: ['airbnb-base'],}, {files: ['*.ts'].parser: '@typescript-eslint/parser'.plugins: ['@typescript-eslint'].extends: ['airbnb-base'.'plugin:@typescript-eslint/recommended'],}, {files: ['*.vue'].parser: 'vue-eslint-parser'.parserOptions: {
        parser: '@babel/eslint-parser'.babelOptions: {
          configFile: path.resolve(__dirname, './babel.config.js'),}},extends: ['airbnb-base'.'plugin:vue/recommended'],},]};Copy the code

It also added the eslint-import-resolver-alias dependency configuration for the use of aliases in the project.

7. To summarize

The original purpose of using the CLI is to get a usable project configuration, but since @vue/ CLI does not have a way to provide customize-cra plug-ins that are readily available, you still need to understand the basics of project configuration to avoid confusion when problems occur.