I'm writing a custom plugin that based on various conditions, it fixes an error by passing a new type. for example,
before the fix:
const x = X("A");
~ <-- Error
after the fix:
const x = X<A>("A");
Everything seems to working, except the part where the following rule is being enforced in JS files as well. How can I enforce the rule to run only in TS files?
One way to achive this, is to use "overrides" in your .eslintrc.js file. to only enable it on .ts files and keep the rest of your eslint config the same:
You can look at this in more detail on https://eslint.org/docs/latest/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns
Example:
module.exports = {
...
"overrides": [
"files": [
"**/*.ts"
],
"rules": {
"your-cool-rule": "error"
}
]
...
}
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.
Is there an eslint (or typescript-eslint) rule to require each var/let/const statement appear on its own line? I've tried one-var, one-var-declaration-per-line, and max-statements-per-line. From my experiments, max-statements-per-line is too aggressive, targeting some single-line patterns we commonly use. The other two rules don't correctly catch multiple var statements on one line. Is there another rule or configuration I'm overlooking?
Specific example:
let foo: string; let bar: string;
let blah = function blah() { console.log('woot'); };
.eslintrc:
{
"rules": {
// "max-statements-per-line": "error",
"one-var": [ "error", "never" ],
"one-var-declaration-per-line": [ "error", "always" ]
}
}
No errors reported given this config. Uncommenting the max-statements-per-line rule flags both lines. I'd like a ruleset that flags the first line, but allows the second.
The rules you list only apply to single statements (i.e. things where it's invalid to put a ; in the middle). What you have there are multiple statements on a single line. It would be similar if you did:
console.log('foo'); console.log('bar');
You can prohibit any lines with 2 statements using:
"max-statements-per-line": ["error", { "max": 1 }],
Tip: There are a ton of these types of issues that are all covered by the prettier formatter, and you can integrate it into eslint so that anything it sees as improperly formatted is also a linting error. This issue, all types of spacing/indention issues, wrappable lines, and more all come "for free".
extending plugin:prettier/recommended disables a bunch of other rules that would normally conflict, so you can leave out a lot of things from the eslint config like quotes, semi, arrow-parens, etc. because they'll be disabled anyway.
{
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint/eslint-plugin",
"#typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended",
// prettier configs must come last to disable conflicting rules!
"prettier",
"plugin:prettier/recommended"
]
"rules": {
// ...
}
}
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,
}
};
Can somebody explain to me how you access a function in the .edge template from the app.js file?
In resources/js/app.js I have
function myFunc() {
console.log("works???")
}
In the edge template I have
Some click
And I get the error
VM6192 :19 Uncaught ReferenceError: myFunc is not defined
at HTMLAnchorElement.onclick (VM6192 :19)
Note that I have the
<!-- Renders scripts -->
#entryPointScripts('app')
And the function is in the http://localhost:8080/assets/app.js path
I did manage to do something like window.myFunc = myFunc, inside app.js, but I need to call some async functions and I want the already compiled functions by webpack.
It seems that you do either:
map your function to window, in the app.js file (window.myFunc = myFunc), or
add an eventListener to the button you want
document.getElementById('my-btn').addEventListener('click', myFunc);
In order to make es6 work, with features like async/await, you need to add babel;
install the babel polyfill: https://babeljs.io/docs/en/babel-polyfill#installation
install core-js: https://github.com/zloirock/core-js#installation
create a .babelrc file with this configuration
{
"presets": [
[
"#babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.16"
}
]
]
}
run node ace serve --watch again
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"]
}]