Is there a way to configure eslint globally in Codesandbox static project. I tried to add .eslintrc.json file to the root of the project, but I still get the eslint's no-undef warnings I try to supress:
{
"globals": {
"cornerstone": true
},
"rules": {
"no-undef": "off"
}
}
Related
I'm getting an error when using TS aliased paths within the same project: Projects should use relative imports to import from other files within the same project
I don't want this behavior. Any idea how to disable?
I tried playing with the #nrwl/nx/enforce-module-boundaries option, but it has almost no documentation around its options
// NX doesn't like this line which uses a path to a file within the
// same NX project. It wants me to use relative pathing, which I
// don't want to use
import { fooHandler } from '#handlers/foo';
Had to look through the npm package, but found it by searching for the error text. You can disable it like this from inside of your .eslintrc.json settings:
{
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {
"#nrwl/nx/enforce-module-boundaries": [
"error",
// This is the part you need to add
{ "allowCircularSelfDependency": true }
]
}
}
]
}
For those who are coming here without this getting resolved. (nx monorepo usage)
For lint error:
Projects should use relative imports to import from other files within the same project - eslint rule #nrwl/nx/enforce-module-boundaries fails
Add "allowCircularSelfDependency": true.
"#nrwl/nx/enforce-module-boundaries": [
"error",
{
"allowCircularSelfDependency": true, -> This may solve the lint error.
"allow": ["#account/**"], -> // White list the lint error.
...
}
Whitelist the folders: Add "allow": [#foldername]
"#nrwl/nx/enforce-module-boundaries": [
"error",
{
"allow": ["#account/**"], -> // White list the lint error.
...
}
That should fix it.
My project's eslint config extends from airbnb:
module.exports = {
root: true,
parser: "#typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.eslint.json",
},
plugins: ["#typescript-eslint"],
extends: [
"airbnb-base",
"airbnb-typescript/base"
]
};
I would like to slightly adjust the import/no-extraneous-dependencies rule which is already configured with airbnb config.
I am interested in adding one more file to allowed for devDependencies imports:
rules: {
"import/no-extraneous-dependencies": [
"error",
{
devDependencies: ["vitest.config.ts"],
},
],
},
If I do like above, then I completely overwrite the list in 'import/no-extraneous-dependencies'[1].devDependencies and the configuration I inherited from airbnb gets lost. How to add one more file to devDependencies list instead of completely overwriting the rule's configuration?
Looks like configurations of the single rule from different configs do not get somehow merged. So, if the last config which configured import/no-extraneous-dependencies rule was airbnb-typescript/base, then I just need to import it and adjust it as needed.
Below is the solution for my case:
const airbnb = require("eslint-config-airbnb-typescript/lib/shared");
const airbnbNoExtraDepsRule = airbnb.rules["import/no-extraneous-dependencies"];
airbnbNoExtraDepsRule[1].devDependencies.push("vitest.config.ts");
module.exports = {
extends: ["airbnb-base", "prettier"],
rules: {
"import/no-commonjs": "on",
"import/no-extraneous-dependencies": airbnbNoExtraDepsRule,
}
};
First of all, some facts:
Node.js requires that all local imports include the imported module's extension (e.g. import hello from './hello.js', not import hello from './hello').
TypeScript will compile imports with or without the .js extension, which means a missing .js extension is a runtime error.
TypeScript doesn't transform imports to add the .js extension or convert .ts to .js.
In my Node.js project, I want to make missing a missing .js extension be a build-time error using the import/extensions ESLint rule. However, when I enable this rule using the following configuration:
{
"root": true,
"env": {
"node": true
},
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended"
],
"settings": {
"import/resolver": {
"typescript": {},
"node": {
"extensions": [".js"]
}
}
},
"rules": {
"import/extensions": ["error", "ignorePackages"]
}
}
running eslint gives me the following error:
/sandbox/src/index.ts
1:19 error Missing file extension "ts" for "./hello.js" import/extensions
Source files:
// index.ts
import hello from "./hello.js";
hello();
// hello.ts
export default function hello() {
console.log("Hello");
}
CodeSandbox link: https://codesandbox.io/s/elated-germain-13glp7
I fixed this with the following config:
{
"root": true,
"env": {
"node": true
},
"extends": [
"eslint:recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended"
],
"rules": {
"import/extensions": ["error", "ignorePackages"],
"import/no-unresolved": "off"
}
}
The main thing is to disable the "import/no-unresolved" rule and remove "settings"."import/resolver"."node". ("import/no-unresolved" is redundant as unresolved imports are resolved at the compilation stage.) Other items removed here were already being added as a result of extending the #typescript-eslint plugins.
I found an eslint plugin that can fix missing .js extensions for imports in .ts files, instead of just showing an error:
https://github.com/AlexSergey/eslint-plugin-file-extension-in-import-ts
https://www.npmjs.com/package/eslint-plugin-file-extension-in-import-ts
Install:
npm i -D eslint-plugin-file-extension-in-import-ts
Add to .eslintrc file:
{
"plugins": [
"file-extension-in-import-ts"
],
"rules": {
"file-extension-in-import-ts/file-extension-in-import-ts": "error"
}
}
NOTE: I ran into an issue similar to https://github.com/import-js/eslint-plugin-import/issues/1292 when using this package, and it will incorrectly try to add .js extensions on these paths when fixing automatically.
You could try ts-add-js-extension package to append .js extension to the transpiled JavaScript files. After you install you can do
ts-add-js-extension add --dir={your-transpiled-outdir}
I want to include the rule no-unpublished-import from eslint-plugin-node, however, it is conflicting with my current .eslintrc because I am using typescript-eslint and eslint-import-resolver-typescript.
It is my current configuration:
{
"parser": "#typescript-eslint/parser", // Specifies the ESLint parser
"extends": [
"airbnb-base",
"plugin:#typescript-eslint/recommended", // Uses the recommended rules from the #typescript-eslint/eslint-plugin
"prettier", // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array
"prettier/#typescript-eslint" // Uses eslint-config-prettier to disable ESLint rules from #typescript-eslint/eslint-plugin that would conflict with prettier
],
"parserOptions": {
"project": "./tsconfig.json",
"ecmaVersion": 6, // Allows for the parsing of modern ECMAScript features
"sourceType": "module" // Allows for the use of imports
},
"rules": {
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".ts"]
},
// use <root>/tsconfig.json
"typescript": {
"alwaysTryTypes": true // always try to resolve types under `<root>#types` directory even it doesn't contain any source code, like `#types/unist`
}
}
},
"root": true
}
The code compiles correctly, however, if I add to the extends option the plugin:node/recommended the compilation process will fail:
1:1 error Import and export declarations are not supported yet node/no-unsupported-features/es-syntax
1:43 error "express" is not found node/no-missing-import
2:1 error Import and export declarations are not supported yet node/no-unsupported-features/es-syntax
My package.json includes the node": ">=12.0.0. Also, this rule should be ignored because I am using typescript. On the other hand, I am just exporting types from express because the module don't use it.
According to this issue the conflict should be resolved by eslint-plugin-node.
How can I accomplish the merge of both plugins? Do I have to go disabling rules one by one?
UPDATED:
It seems it was asked in this issue on the eslint-plugin-node repository. It works for no-unsupported-features and no-missing-import, however, it is still failing with the import definition of express with no-extraneous-import.
UPDATED 2:
It seems eslint-plugin-node is working on a enhancement to accomplish it. Issue here
Firstly, you have to add the option tryExtension to include TS files:
"settings": {
"node": {
"tryExtensions": [".js", ".json", ".node", ".ts", ".d.ts"]
},
To solve the no-unsupported-features/es-syntax, according to this issue about adding information to works with TypeScript, if you work with transpilers you will have to ignore it under rules:
"node/no-unsupported-features/es-syntax": ["error", { "ignores": ["modules"] }],
On the other hand, use just types and not the code is not supported yet by the eslint-plugin-node. They are working on a enhancement to solve it. However,, to solve the no-missing-import, you have to add to the resolvePath the node_modules/#types:
"node": {
"resolvePaths": ["node_modules/#types"],
"tryExtensions": [".js", ".json", ".node", ".ts", ".d.ts"]
},
Even so, it will generate a no-extraneous-import because it doesn't detect the module, because it is just a type. Meanwhile they are working on this enhancement, you can use allowModules under that rule for workaround:
"node/no-extraneous-import": ["error", {
"allowModules": ["express"]
}]
I use prettier with eslint in vs code as follow setting.
//.eslintrc
{
"parser": "babel-eslint",
"root": true,
"extends": [
"airbnb",
"plugin:vue/essential",
"plugin:prettier/recommended",
"eslint:recommended"
],
"rules": {
"no-console": 0
}
}
//.prettierc
{
"printWidth": 100,
"singleQuote": true,
"jsxBracketSameLine": true
}
but some eslint recommend conflict autoformatting from prettier.
prettier make code like this.
import { mapGetters, mapActions } from 'vuex'
(autosaving)
import {
mapGetters,
mapActions
} from 'vuex'
but now eslint draw red line.
// example
Replace `␍⏎··mapActions,␍⏎··mapGetters␍⏎` with `·mapActions,·mapGetters·`eslint(prettier/prettier)
I don't want eslint red line anywhere...
so I was found some document, but cannot found prettier setting..
how disable this red line?
Since prettier is very opinionated, it might cause trouble with es-lint sometimes. You might want to use a library like prettier-eslint
This will format your code with prettier, then try to fix it with eslint.
You can probably disable the conflicting rules as described in the prettier docs.
https://prettier.io/docs/en/eslint.html
They've mentioned adding
{ "extends": ["prettier"] }
to your .eslintrc.json might help along with other configuration.