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

问题描述

我正在尝试在 webgl javascript 项目中调整打字稿。为此，我尝试从头开始构建一个 typescript 配置的项目，并模仿包和 .eslintrc.js。当您运行 eslint --init 时，系统会询问您项目的所有选项以及您是否正在使用 typescript，我运行它并且 es-lint 的行为与 javascript 和 typescript 的预期相同。这些是我从头开始工作的 typescript 项目的 package.json 和 eslintrc.js。

包.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'],
  },
};

现在我将发布我的应用程序 .eslintrc.js 和 package.json，并注明我的修改。

包.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 中，所以我不知道我缺少什么。

希望大的配置文件不会太拥挤。任何帮助都非常感谢，在我可能只是将我的项目的所有代码传递给一个新的代码之前，打字稿按预期工作。提前致谢。

标签： typescriptvscode-settings

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

问题描述

解决方案

推荐阅读