混合打字稿和Javascript存储库-eslint-影响JS文件的TS规则

时间:2020-11-10 19:09:26

标签: javascript typescript eslint

我有一个主要是打字稿的存储库,但是我也有一些javascript浮动,主要用于与构建相关的东西,这些东西永远不会部署。话虽如此,我仍然希望对它进行整理,并能够更漂亮地对其进行格式化。但是,我现在在javascript文件中收到与打字稿相关的警告,告诉我需要输入内容,即使它是.js

它首先会抱怨文件需要成为es6模块,然后如果我将其转换为es6模块,它将抱怨功能不是类型。

摆脱这些问题的最佳解决方案是什么?

示例文件utils.js

'use strict'

const log4js = require('log4js') // <-- Require statement not part of import statement.eslint(@typescript-eslint/no-var-requires)

var getLogger = function (category) { 
  log4js.configure({
    appenders: { out: { type: 'stdout' } },
    categories: { default: { appenders: ['out'], level: 'debug' } },
  })
  return log4js.getLogger(category)
}

const utils = {
  getLogger: getLogger,
}

module.exports = utils

转换后:

'use strict'

import { configure, getLogger as _getLogger } from 'log4js'

/*
Warnings on the following line
Missing return type on function.eslint@typescript-eslint/explicit-module-boundary-types
Argument 'category' should be typed.eslint@typescript-eslint/explicit-module-boundary-types
*/
var getLogger = function (category) {
  configure({
    appenders: { out: { type: 'stdout' } },
    categories: { default: { appenders: ['out'], level: 'debug' } },
  })
  return _getLogger(category)
}

const utils = {
  getLogger: getLogger,

}

export default utils

基本文件夹结构:

src
 - components
    comp.ts
 - redux
    file.ts
 ...etc
build-system
   utils.js
   style.js
   tasks.js

gulpfile.js
.eslintrc.js

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6", "dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noFallthroughCasesInSwitch": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "build-system",
    "src",
    ".eslintrc.js",
    "gulpfile.js"
  ],
  "exclude": ["node_modules"]
}

.eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  parserOptions: {
    ecmaVersion: 6,
    tsconfigRootDir: __dirname,
    project: './tsconfig.json',
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ['react', 'react-hooks', '@typescript-eslint'],
  rules: {
    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
    'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': ['error'],
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
}

0 个答案:

没有答案