ESLint: What does it mean if a rule is fixable? - eslint

According to ESLint: Docs: Rules,
Some rules are fixable using the --fix command line flag.
What does that mean?

Running the command eslint --help, tells us that the --fix command line flag "automatically fix[es] problems."
ESLint: Docs: User Guide: Command Line Interface: --fix provides more explanation:
This option instructs ESLint to try to fix as many issues as possible.
The fixes are made to the actual files themselves and only the
remaining unfixed issues are output. Not all problems are fixable
using this flag, and the flag does not work in these situations:
This option throws an error when code is piped to ESLint.
This option has no effect on code that uses processors.

Related

ESLint print all fixes to terminal

When I run ESLint with the --fix flag, I'd like for the changes made to be output to the terminal. By default it displays no output except for errors or warnings that cannot be fixed, as the ESLint docs say:
The fixes are made to the actual files themselves and only the remaining unfixed issues are output.
Is there any way to force ESLint to print all the issues that were fixed to the terminal?
For the sake of clarity, here's the command I'm currently running: eslint src --fix --ext js,ts,tsx.

How to tell my linter to flag require() statements with a warning

I've set up a new nodeJS project with typescript. My linter is flagging me with errors, for example:
import authentication from "./routes/authentication"; // Flags "Cannot find module ..."
I would like it to flag a warning/error for these statements, as they break my app when I try to load it:
const pool = require("../database/db"); // Currently not flagging as a warning either for the fact that the file does not exist, or that it is using a require() statement.
I'm guessing eslint is doing my linting. But I haven't explicitly set it up. I tried creating and playing with a .eslint.rc file, but nothing happened.
How do I check what my linter is? I can't find anything in my VS-Code settings to say what I'm using. I can't find any reference to it in my package.json or tsconfig.json files that reference a linter either?
How do I then get my linter to flag require() statements?
So it looks like eslint was already running. It was installed in my extensions, but I've no idea what rules it was using. It must have been some defaults?
I ran yarn add eslint -D and npx eslint --init to set up eslint. Then I changed the rules: object in my .eslintrc.js file. This seems to have changed the linting, which suggests I was already using eslint.
I haven't yet worked out how to flag errors for the require() statements. I've found this YouTube video, which explains that:
require() statements are just functions. We can write require() statements within if() conditions and functions. This is not possible with import ... from ... statements
Because require() statements are functions, they are only being called in runtime. imports are static, so they are being checked by typescript in parse time. This is useful as it means we can get errors before moving into runtime.
I never found a better way of checking what linter my VS-Code was running other than setting up eslint with the github.com/typescript-eslint/... instructions and then playing with the .eslintrc.js file to see that the rules changed. Even then I had to runyarn eslint . --ext .js,.jsx,.ts,.tsx before the rules:{} in my .eslintrc.js started to take effect.
In order to get the require() statements to flag up with my linter, I added the following to my .eslintrc.js rules:{} property:
rules: {
"#typescript-eslint/no-var-requires": 1,
...
}
Although this didn't take effect until after I'd followed the steps described in item 1. As stated above, for some reason I had to run yarn eslint . --ext .js,.jsx,.ts,.tsx before the rules:{} in my .eslintrc.js started to take effect.

How can I solve the prettier/prettier problem

I'm using nuxtjs, and I installed eslint on my project, and upon using npm run dev, I get a bombardment of errors. How can I fix this:
This error is related to Windows Line endings being different from Unix ones. Try running npx prettier --write . on your project's directory. This command will tell prettier to fix simple errors (such as this one) when found.
To prevent this error from happening again you can either set "end-of-line" to auto on your .prettierrc file or try setting line endings to "Unix"/LF on your editor: instructions for VSCode and for IntelliJ-based editors

ESLint output to file and console at the same time

By default ESLint will print it's results to standard output. If you add the output option, it will redirect the output to a file. So far so good, but is there a way for it to do both?
We need the file output for GitLab to parse the results and display them in the UI, but some of our developers can't be bothered to change the way they do things and want to look at the output instead.
Is there an out-of-the-box way to get both or is my only chance to write my own script for running ESLint using the CLIEngine Node stuff mentioned in their documentation?
Thanks in advance.
So, after some research I think I found the answer myself.
There's basically 2 ways to have output on both console and file at the same time:
The easy way is by using this JavaScript package called ESLint Output.
The more complicated way is basically building said package yourself. You have to create a JavaScript file which you will run instead of ESLint and import/require ESLint in that file. By importing ESLint as a package instead of running it directly you can then run ESLint using Node's CLIEngine on your files to be linted and store the output in a variable. That output can then be saved to a file and printed again.
Hopefully, to no one's surprise, the methodology described in Option 2 is exactly what the package in Option 1 does: wrapping option 2 in an easy to understand config file and gathering all the configuration from the default eslintrc file for you.
Just write ESLint result into file and then read it by using one of ESLint-formatters:
npx eslint ./cartridges/ --format json --output-file result.json
node -p "require('./node_modules/eslint/lib/cli-engine/formatters/unix.js')(require('./result.json'))"
You can achieve it with eslint-html-reporter. When you'd like to have results from Terminal and export this into an .html file then the output from Terminal becomes a bit less pretty (which is not the case if it's done only in one of those), but it's doable by running:
./node_modules/.bin/eslint --ext .jsx . & ./node_modules/.bin/eslint --ext .jsx . -f node_modules/eslint-html-reporter/reporter.js -o report.html (in this example it looks recursively for .jsx file in your project's folder).
I had the same issue, and worked around by running eslint twice.
Created a shell script with
#!/usr/bin/env bash
node_modules/.bin/eslint --quiet \
--max-warnings 100 \
-o eslint-output.$1 \
-f $1 '*/**/*.{js,ts,tsx}'
Then call the script twice thru Jenkins:
steps {
echo 'Rodando ESLint...'
sh("""
yarn install
./eslint.sh junit || true
./eslint.sh codeframe || true
""")
junit(
allowEmptyResults: true,
healthScaleFactor: 0.0,
testResults: 'eslint-output.junit'
)
}
To generate the file for report:
eslint src/ --format json --output-file eslintreport.json

ESLint config for unused var

Is it possible to fix all ESLint warning by CLI ?
I've try this, but don't fix all error (unused var for example) :
eslint --fix src
As the old adage goes, "RTFM".
See: https://eslint.org/docs/user-guide/command-line-interface#fixing-problems
--fix
This option instructs ESLint to try to fix as many issues as possible. The fixes are made to the actual files themselves and only the remaining unfixed issues are output. Not all problems are fixable using this option, and the option does not work in these situations:
This option throws an error when code is piped to ESLint.
This option has no effect on code that uses a processor, unless the
processor opts into allowing autofixes.

Resources