[英]Mixed Typescript and Javascript Repo - eslint - TS rules affecting JS files
I have a repo that is primarily typescript, however I do have some javascript floating around as well, primarily for build related stuff that would never be deployed.我有一个主要是打字稿的 repo,但是我也有一些 javascript 浮动,主要用于构建永远不会部署的相关内容。 That being said, I would still like to lint it and be able to format it with prettier.
话虽如此,我仍然想对它进行整理并能够将其格式化得更漂亮。 However, I am now getting typescript related warnings in javascript files, telling me things need to be typed, even though it's a
.js
但是,我现在在 javascript 文件中收到与打字稿相关的警告,告诉我需要输入内容,即使它是
.js
It will first complain that the files need to become es6 modules, and then if I convert it to one, it will complain the the functions aren't types.它首先会抱怨文件需要成为 es6 模块,然后如果我将其转换为一个模块,它会抱怨函数不是类型。
What would be the best solution to get rid of these issues?摆脱这些问题的最佳解决方案是什么?
Example file utils.js
:示例文件
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
When converted:转换时:
'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
Basic folder structure:基本文件夹结构:
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',
],
}
You need to specify the .js
files explicitly in your tsconfig.include
.您需要在
tsconfig.include
明确指定.js
文件。 Eg:例如:
{
"compilerOptions": { ... },
"include": [
"build-system/*.js",
"src",
".eslintrc.js",
"gulpfile.js"
],
"exclude": ["node_modules"]
}
See here (skip to the end of the parserOptions.project
section).请参见此处(跳至
parserOptions.project
部分的末尾)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.