首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >webgl项目中的typescript配置。意外标记:对typescript中的类型进行反编码时出错

webgl项目中的typescript配置。意外标记:对typescript中的类型进行反编码时出错
EN

Stack Overflow用户
提问于 2020-06-15 05:32:30
回答 1查看 109关注 0票数 1

我正在尝试改编webgl javascript项目中的typescript。为此,我尝试从头开始构建一个typescript配置项目,并模仿包和.eslintrc.js。当您运行eslint --init时,系统会要求您提供项目的所有选项,如果您使用的是typescript,那么我将运行该命令,并且es-lint的行为与使用javascript和typescript时的预期一样。这些是我从头开始的工作typescript项目的package.json和eslintrc.js。

Package.json:

代码语言:javascript
复制
{
"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:

代码语言:javascript
复制
    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,并指出我的修改。

package.json:

代码语言:javascript
复制
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:

代码语言:javascript
复制
{
  "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"
  }
}

我用“<-I ADDED THIS AS in the WORKING PROJECT”在2站点上添加了评论,在我的试验中实现了typescript linting在我的项目中的正确行为。问题是,当我声明一个类型时,我总是发现意外的令牌错误,并且找不到原因。我再次执行eslint --init,下载了所有的typescript包,并将解析器和插件添加到我的.eslintrc.js中,所以我不知道我错过了什么。

希望大型配置文件不会太过繁琐。在我可能只是将我项目的所有代码截取到一个新的代码之前,任何帮助都是非常感激的,在这个新代码中,typescript可以按预期工作。提前谢谢。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-15 05:59:32

代码语言:javascript
复制
  extends: [
    'airbnb/base',
    'plugin:@typescript-eslint/recommended'
  ],

将此'plugin:@typescript-eslint/recommended'添加到extends中,以便eslint知道它应该使用哪些关于typescript的确切规则。

Node:提醒,扩展数组的顺序很重要,因为下一个扩展数组将扩展或覆盖前一个扩展数组。参考:ESLint - Extending Configuration Files

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62378485

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档