webgl 项目中的 typescript 配置。意外的标记：在打字稿 lint 错误中声明类型时

Question

我正在尝试在 webgl javascript 项目中调整打字稿。为此，我尝试从头开始构建一个 typescript 配置的项目，并模仿 packages 和 .eslintrc.js。当你运行 eslint --init 时，系统会要求你提供项目的所有选项，如果你使用的是打字稿，我运行并且 es-lint 的行为与 javascript 的预期一致和打字稿。这些是我从头开始的工作打字稿项目的 package.json 和 eslintrc.js。

Package.json:

{
"name": "typescripttrial2",
  "version": "1.0.0",
  "description": "typescripttrial2",
  "main": "index.js",
  "scripts": {
    "test": "unknown"
  },
  "author": "LM",
  "license": "ISC",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.2.0",
    "@typescript-eslint/parser": "^3.2.0",
    "eslint": "^7.2.0",
    "eslint-config-airbnb-base": "^14.2.0",
    "eslint-plugin-import": "^2.21.2"
  },
  "dependencies": {
    "typescript": "^3.9.5"
  }
}

.eslinrec.js: .eslinrec.js:

    module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: [
    'airbnb-base',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 11,
    sourceType: 'module',
  },
  plugins: [
    '@typescript-eslint',
  ],
  rules: {
    'linebreak-style': ['error', 'windows'],
  },
};

现在我将 post 我的应用程序。eslintrc.js 和 package.json，并指出我的修改。

package.json:

const path = require('path');
module.exports = {
  root: true,
  env: {
    browser: true,
    jquery: true
  },
  extends: [
    'airbnb/base',
  ],
  parserOptions: {
    parser: 'parser: '@typescript-eslint/parser', // <----I ADDED THIS AS IN THE WORKING PROJECT 
    (before 'babel-eslint')
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', path.resolve(__dirname, 'src')],
        ],
        extensions: [
          '.js', '.js', '.json',
        ],
      },
    },
  },
  plugins: [  <----I ADDED THIS AS IN THE WORKING PROJECT (this was added, this just was not before)
        '@typescript-eslint',
  ],
  rules: {
    'comma-dangle': ['error', {
      'arrays': 'always-multiline',
      'objects': 'always-multiline',
      'imports': 'always-multiline',
      'exports': 'always-multiline',
      'functions': 'never'
    }],
    'function-paren-newline': ['error', 'consistent'],
    'no-alert': 0,
    'no-bitwise': 0,
    'no-console': 0,
    'no-param-reassign': 0,
    'no-shadow': 0,
    'jsx-a11y/anchor-is-valid': 0,
    'jsx-a11y/click-events-have-key-events': 0,
    'jsx-a11y/label-has-associated-control': 0,
    'jsx-a11y/label-has-for': 0,
    'jsx-a11y/no-autofocus': 0,
    'jsx-a11y/no-noninteractive-element-interactions': 0,
    'jsx-a11y/no-static-element-interactions': 0,
    'linebreak-style': [0, "windows"],
    'camelcase' : 0,
    'no-plusplus' : 0,
    'no-underscore-dangle' : 0,
    'no-buffer-constructor:': 0
  },
};

和.eslintrc.js:

{
  "name": "webgl2-boilerplate",
  "description": "",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "private": true,
  "main": "index.js",
  "scripts": {
    "clean": "rimraf editor/node_modules",
    "lint": "eslint --cache --ext .js src",
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "dependencies": {
    "typescript": "^3.9.5"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@typescript-eslint/eslint-plugin": "^3.2.0",
    "@typescript-eslint/parser": "^3.2.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.1.0",
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "18.0.1",
    "eslint-config-airbnb-base": "^14.2.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-loader": "^2.2.1",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "raw-loader": "^3.1.0",
    "webpack": "^4.36.1",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  }
}

我在我用“<----我在工作项目中添加了这个”更改我的项目的 2 站点中添加了评论，并尝试在我的项目中实现 typescript linting 的正确行为。问题是当我声明一个类型时，我总是发现意外的标记错误，并且无法弄清楚原因。我再次执行了 eslint --init，下载了所有 typescript 包，并将解析器和插件添加到我的 .eslintrc.js，所以我不知道我错过了什么。

希望大型配置文件不会过于庞大。非常感谢任何帮助，在我可能只是将我项目的所有代码转移到一个新的代码之前，打字稿按预期工作。提前致谢。

Answer 1

  extends: [
    'airbnb/base',
    'plugin:@typescript-eslint/recommended'
  ],

将这个 'plugin:@typescript-eslint/recommended' 添加到 extends 中，这样 eslint 就知道它应该使用什么关于 typescript 的确切规则。

节点：提醒，扩展数组的顺序很重要，因为下一个将扩展或覆盖之前的数组。参考：ESLint - Extending Configuration Files

webgl 项目中的 typescript 配置。意外的标记：在打字稿 lint 错误中声明类型时

typescript configuration in a webgl project. Unexpected token : when decalring a type in typescript lint error

typescript

vscode-settings