How to instruct ESLint to ignore a ruleset in a project? - javascript

In my VSCode (Win 10) I have installed the VSCode extension ESLint. On my computer is a Node project, with a JS file inside. If I open this JS file in VSCode, ESLint reports infractions from several different rule sets, including Prettier (screenshot). For this project only, how can I instruct ESLint to not check any of the rules in the Prettier rule set?
FYI when I open VSCode, here is a list of the extensions installed.
The .eslintrc.json file for this project contains the following:
{
"extends": [
"plugin:#wordpress/eslint-plugin/recommended"
],
"env": {
"browser": true,
"jquery": true
}
}
Note: The plugin #wordpress/eslint-plugin/recommended is a separate plugin I have added to this project, and it has rules that I want ESLint to list and report.

Inside eslintrc.js, you can omit/edit the rules you do not like, as such:
module.exports = {
extends: 'airbnb-base',
rules: {
'no-console': 'off',
'no-restricted-syntax': 'off',
'linebreak-style': 0,
'guard-for-in': 'off',
'max-len': ['error', { code: 160 }],
},
};

You can override such rules inside .eslintrc.json according to
{
"extends": [
...
],
...
"rules": {
"<rule1>": "off",
...
}
}

There are a few ways you can ignore rules from ESLint
Manually specify each rule in .eslintrc file as off
{
"extends": [
...
],
...
"rules": {
"<rule1>": "off",
...
}
}
Ignore files or folder from eslint rules i.e. add ignorePatterns
{
"ignorePatterns": ["temp.js", "**/vendor/*.js"],
"rules": {
//...
}
}
Create .eslintignore file and exclude the files or folder from being linted by ESLint. ESLint Ignore

Related

How to remove unused imports with a command?

I have files in my nx project with import declaration without any use and I want to remove them.
After I searched in stackoverflow I found the answer to open the file in vscode, and press alt+shift+o and when the declaration is not used then it's remove and sort the import.
But I have 10,000 files. so is there a command to do that in all those files? I looking in eslint but there is no rule for that.
Install the no-unused-imports plugin
Add unused-imports to the plugins section of your .eslintrc file
{
"plugins": ["...", "unused-imports"]
}
add the following rules
"no-unused-vars": "off",
"unused-imports/no-unused-imports": "error",
"unused-imports/no-unused-vars": [
"warn",
{ "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
],
Then add script to your package.json file
"scripts": {
...
"fix-lint-errors": "eslint nx --fix"
},
from command line run the script
npm run fix-lint-errors
or
yarn fix-lint-errors
If you are a heavy vscode user, so you can simply open your preference settings then add the following to your settings.json:
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": true
}
Or you can make a stand alone tslint file that has the following in it:
{
"extends": ["tslint-etc"],
"rules": {
"no-unsed-declaration: true"
}}
Then run the following command to fix the imports:
tslint --config tslint-imports.json --fix --project
Then use
ng build
or
ng build name_of_project --configuration=production

How to configure sass and ESLint in svelte project?

I am new in svelte. I trying to add ESLint to my svelte project.
My eslintrc.json:
{
"env": {
"es6": true,
"browser": true,
"node": true
},
"extends": [
"standard", "airbnb-base/legacy"
],
"plugins": [
"svelte3"
],
"overrides": [
{
"files": ["**/*.svelte"],
"processor": "svelte3/svelte3"
}
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2019,
"sourceType": "module"
}
}
It works, but linter rules does not support sass syntax. I have this error.
How can I fix it?
If you're using some sort of preprocessor on the component styles, then it's likely that when this plugin calls the Svelte compiler on your component, it will throw an exception. In a perfect world, this plugin would be able to apply the preprocessor to the component and then use source maps to translate any warnings back to the original source. In the current reality, however, you can instead simply disregard styles written in anything other than standard CSS. You won't get warnings about the styles from the linter, but your application will still use them (of course) and compiler warnings will still appear in your build logs.
This setting can be given a function that accepts an object of attributes on a tag (like that passed to a Svelte preprocessor) and returns whether to ignore the style block for the purposes of linting.
The default is to not ignore any styles.
settings: {
'svelte3/ignore-styles': () => true
}
I faced the same issue and there is no documentation on how to use the svelte3/ignore-styles in settings to ignore the styles in eslint. Here is how i fixed the issue -
I Changed .eslintrc to .eslintrc.js in order to use the ignore rule as a function -
module.exports = {
...
"rules" : {
},
"settings": {
"svelte3/ignore-styles": () => true
}
}

Not able to build node js project for a specifc imported library

I am importing libraries in my vue.js project. For Library1 alone there are no errors. When i run my vue node js project build for library 2 i am importing , it always fails at below line and gets stuck with message 'building for production'.
Could not find implementations for the following rules specified in the configuration:
no-explicit-any
Try upgrading TSLint and/or ensuring that you have all necessary custom rules installed.
If TSLint was recently upgraded, you may have old rules configured which need to be cleaned up.
Is there a way to make this ignore by npm build ?
Below is my .eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended',
'#vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 2020,
ecmaFeatures: {
legacyDecorators: true,
},
},
rules: {
'#typescript-eslint/no-var-requires': 0,
'#typescript-eslint/ban-ts-ignore': 'off',
"#typescript-eslint/no-explicit-any": "off",
}
}
Do i need to update my tsconfig or tslint to stop checking for this when building production. This happens to only my vue library projecting i am using.
I use npm link and npm link to link and install libraries.
Well the easiest way to fix it is by removing tslint. As you Already have eslint. You just have have to install some extra eslint packages
npm i -D #typescript-eslint/eslint-plugin;
npm i -D #typescript-eslint/parser;
npm i -D eslint;
The following is the recommended
module.exports = {
env: {
commonjs: true,
es6: true,
node: true,
},
extends: [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
],
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly",
},
parser: "#typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.json",
ecmaVersion: 2019,
},
plugins: ["#typescript-eslint"],
rules: {
.....
}
}
NOTE:
on your tsconfig.json
Add the include section. This as the name says includes the paths of your source files. And exclude does the opposite
{
"compilerOptions": {
....
},
"exclude": [
"/node_modules/",
"./config/"
],
"include": [
"./src/*.ts",
"./src/**/*.ts",
"./src/**/**/*.ts",
"./src/**/**/**/*.ts"
]
}

How to configure StandardJS?

One of the main features of StandardJS is that it doesn't require configuration.
The problem is that I want to configure it. I don't want to put:
/* eslint-env mocha */
...in every test file. I want to configure StandardJS to treat everything in the test directory as mocha tests.
I've found in the README that some configuration is possible, e.g.:
{
"standard": {
"globals": [ "myVar1", "myVar2" ]
}
}
...but I'm struggling to find more comprehensive documentation about the configuration options. Is it possible to configure StandardJS to treat files in different directories differently?
You have a couple of options to try out and see what works for your specific project depending on the recent implementation of StandardJS.
Define your own globals
in package.json:
"standard": {
"globals": [
"describe",
"before",
"after",
"beforeEach",
"afterEach",
"it",
"assert"
]
}
or in .eslintrc:
{
"globals": {
"describe": false,
"before": false,
"after": false,
"beforeEach": false,
"afterEach": false,
"it": false,
"assert": false
}
}
More on ESLint's configuration.
Define an environment
in package.json:
"standard": {
"env": {
"mocha": true
}
}
or in .eslintrc:
{
"env": {
"mocha": true
}
}
Check out currently available environments
Run StandardJS as an NPM script with the environment specified
in package.json:
{
"scripts": {
"lint": "standard --env mocha"
}
}
Use a plugin
after installing the plugin (e.g. eslint-plugin-mocha)
in package.json:
"standard": {
"plugins": [
"mocha"
]
}
or in .eslintrc:
{
"plugins": [
"mocha"
]
}
Create your own, customized rules based on StandardJS
Check out this repository. The quick rundown:
Install with:
npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
Then create a .eslintrc file by extending StandardJS and start to fill with your own rules:
{
"extends": "standard"
}
Since StandardJS uses ESLint under the hood, you can pretty much configure it however you want it using ESLint's documentation.

How to exclude a folder from tslint?

I like to exclude the test folder form linting with tslint in vscode. So I have placed an exclude into my tslint.json config file. Unfortunately the exclude statement is not working. Does any one know how to set the exclude up?
{
"exclude": "tests/**/*.ts",
"rulesDirectory": ["node_modules/tslint-microsoft-contrib"],
"rules": {
"export-name": true,
...
}
}
Latest update: this can now be set in in tslint.json (the following configuration works with tslint 5.11)
{
"linterOptions": {
"exclude": [
"bin",
"build",
"config",
"coverage",
"node_modules"
]
}
}
It seems that this is an open feature request.
Further information can be found here: https://github.com/palantir/tslint/issues/73
Update:
for those who use VSCode with tslint as editor/linting you can add the following to the VSCode config:
// Configure glob patterns of file paths to exclude from linting
"tslint.exclude": "**/PATH_eg_TESTS/**/*.ts"
This worked for me in tslint: 6.1.2.
In the root folder where tslint.json is located create the file path to directory.
"linterOptions": {
"exclude": [
"libs/folder/folder/**",
"apps/stuff/stuff/**"
]
}

Categories

Resources