We Keep Coding

Prettier and / or Eslint?

Most of the projects I work on I just fire up and, at most, disable a linting rule that bugs me. That is to say I don't know much about linting and linters except that eslint is everywhere.
A Vue project I'm working on now (that I did not initially build) has four linting modules and I now want to understand if all of them are necessary, if they are conflicting with each other or complimenting each other. I'm getting so many yellow warnings that don't get fixed with the --fix flag that I want to uninstall everything and install one linter to rule them all.
The project package.json has these:
{
"eslint": "^7.3.1",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.2.2",
"lint-staged": "^10.2.7"
}
Thoughts?
My eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: ["plugin:vue/essential", "#vue/prettier"],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "off" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"max-len": [0, 0, 0],
singleQuote: 0,
trailingComma: 0,
"no-unused-vars": 0,
"vue/no-unused-components": 0,
},
parserOptions: {
parser: "babel-eslint",
},
overrides: [
{
files: ["**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"],
env: {
jest: true,
},
},
],
};

Not sure if I can give a direct answer, but it's super common to combine eslint along with prettier via eslint-plugin-prettier. We use prettier purely for code formatting rules like:
single vs double quotes
max line length
semicolons or not
eslint is more commonly used to find errors in your code that otherwise wouldn't have been caught until runtime. Not every rule in eslint can be fixed via eslint --fix, but many can be. What does your .eslintrc look like?

TypeScript compiler not following ESLint rules

I'm having an issue where the JavaScript produced by the TypeScript compiler doesn't follow the ESLint rules set for the project.
Here is the TypeScript configuration (tsconfig.json):
{
"compilerOptions": {
"lib": ["es2015"],
"module": "commonjs",
"outDir": "dist",
"sourceMap": true,
"strict": true,
"target": "es2015"
},
"include": [
"src"
]
}
Here is the ESLint configuration (.eslintrc.json):
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": [
"standard",
"plugin:#typescript-eslint/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 11
},
"plugins": [
"#typescript-eslint"
],
"rules": {
}
}
I'm using VS Code and when editing TypeScript the errors from ESLint are shown. However, the problems I am having are: The compiler will allow code which doesn't conform to the ESLint rules to pass through, and the JavaScript code which is produced doesn't conform to the rules either. For example, it will terminate each statement with a semicolon, when it should not.
I'm new to TypeScript and I'm pretty sure it's something basic I'm doing wrong, but haven't been able to find this info (so far) in any documentation.
Your guidance is appreciated.

ESLint is not in the business of type-checking your typescript code. You should rely on TypeScript for checking for type errors like tslint (Configure it accordingly). Example tslint.json
{
"rulesDirectory": ["node_modules/codelyzer"],
"rules": {
"arrow-return-shorthand": true,
"callable-types": true,
.....
}

ESLint is not involved with the bundle build pipeline. you may however run eslint before the bundle build in order to fail the whole build in case there are linting issues.
If you want to make any changes to the code generated it should be done with webpack plugins / typescript.
So for example, if you want to remove semicolons, this probably should be done with your minifier/compressor. such as uglifyjs : https://github.com/mishoo/UglifyJS#output-options

all you are missing is a property call project on the parserOptions of your eslint file.
....
“parserOptions”:{
.....
“project”: [“./tsconfig.json”]
.....
you can algo add more things to both files as well

How to extend CRA ESLint rules with EXTEND_ESLINT environment variable

Recently Facebook's Create React App (CRA) released a new feature which allows you to extend their base ESLint rules.
We recognise that in some cases, further customisation is required. It
is now possible to extend the base ESLint config by setting the
EXTEND_ESLINT environment variable to true.
Setting Up Your Editor
Here is the example given but with no detail such as filename or what "shared-config" is.
{
"eslintConfig": {
"extends": ["react-app", "shared-config"],
"rules": {
"additional-rule": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}
}
The feature is enabled by added an environment variable.
EXTEND_ESLINT=true
but on the documentation page it also doesn't give any information how to use it - Advanced configuation
I've added their example code to my build in a file called .eslintrc.json but I get a build error:
"Error: ESLint configuration in .eslintrc.json is invalid: - Unexpected top-level property "eslintConfig"."
Has anyone got this working? Does the file need to export a module?

While unclear from the Create-React-App documentation, the example they give is as if the project's ESLint configuration was inside the eslintConfig property of the package.json file.
You need to configure ESLint as described in its documentation. So if you choose the .eslintrc.json way, it must be a valid ESLint configuration file, which doesn't have a eslintConfig property.
The only things that matter in the example are:
they're extending from "react-app" before any other configuration
any additional rule is set to "warn" to avoid stopping the project from building
if using TypeScript, place the specific TS related configuration in the "overrides" section.
A simple .eslintrc.js (notice the extension) configuration file for a CRA project using TypeScript could be as follows:
const defaultRules = [
'react-app',
'eslint:recommended',
// any other plugins or custom configuration you'd like to extend from.
];
module.exports = {
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2017,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
env: {
browser: true,
node: true,
es6: true,
jest: true,
},
extends: defaultRules,
rules: {
'array-callback-return': 'warn',
'consistent-return': 'warn',
'default-case': 'warn',
// etc.
},
overrides: [
{
files: ['**/*.ts', '**/*.tsx'],
plugins: ['#typescript-eslint'],
extends: [
...defaultRules,
'plugin:#typescript-eslint/recommended',
// any other TypeScript specific config (from a plugin, or custom)
],
rules: {
'#typescript-eslint/no-explicit-any': 'warn',
'#typescript-eslint/no-unused-vars': 'warn',
'#typescript-eslint/no-unused-expressions': 'warn',
// etc.
},
},
],
settings: {
react: {
// React version. "detect" automatically picks the version you have installed.
version: 'detect',
},
},
};

How can I fix ESLint Parsing Error for unexpected token "/"?

const Index = () => (
<div>
<p>Hello World</p>
<Link href="/posts">
<a>Posts</a>
</Link>
</div>
)
ESLint is returning a Parsing Error (Unexpected token) for the closing </p> tag. What am I missing? Are normal HTML attributes not allowed in JSX? (The div seems to work fine)
The exact error is:
[eslint] Parsing error: Unexpected token "/"
ESLint is installed
ESLint React is installed
ESLint React is configured in .eslintrc.json
EDIT:
Using VS Code (with ESLint plugin)
Partial .eslintrc.json:
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
...
}

I received a similar error in Visual Studio 2017 (not Code).
The error "ESLint encountered a parsing error" occurred at the beginning of an import statement.
janniks' solution did not work for me. I suspect because "es6: true "enable[s] all ECMAScript 6 features except for modules".
Since I'm using TypeScript, I don't want to use babel-eslint, per Sean's answer (though it did resolve the parsing error in a plain JS file).
The key trade-off can be summarized as: babel-eslint supports
additional syntax which TypeScript itself does not, but
typescript-eslint supports creating rules based on type information,
which is not available to babel because there is no type-checker.
Instead, I continued to use "#typescript-eslint/parser". Below is my minimal working .eslintrc:
{
"parser": "#typescript-eslint/parser",
"parserOptions": {
"sourceType": "module"
},
"rules": {
"quotes": [ "error", "single" ]
}
}
Note: The error was resolved in plain JS files (not TS) even if I removed the "parser" line, therefore using the default eslint parser.

I encountered the same issue today while setting up a new React project. The fix that worked for me was installing the babel-eslint package (npm install babel-eslint --save-dev or yarn add babel-eslint -D). I then added "parser": "babel-eslint" to my .eslintrc config file. This seems to help babel and ESLint get along a little better than using the default parser.

I'm not sure what caused the problem, but this solved it for me. I changed the .eslintrc.json to the following:
{
//"env": {
// "browser": true,
// "commonjs": true,
// "es6": true
//},
"extends": [
"standard",
"standard-react"
]
}
I left in my original rules as well.
This problem seems to have multiple different causes, so check out the other answers as well.

Flow type checking performance in VSCode

I've built a new project using create-react-app and wanted to start it using a static type checking, there are two choices now in market:
TypeScript
Flow
I kind want to go with Flow just because it's also built by Facebook and should(?) have better support for a React project.
So what I'm struggling it is type-checking performance in VSCode. Once I created my project, I ran the following commands:
yarn add -D eslint-plugin-prettier husky prettier pretty-quick babel-eslint eslint-plugin-flowtype flow-bin eslint
Added Airbnb React style: eslint --init
Ran flow init
Installed Flow Language Support
Disabled JavaScript and TypeScript language support as recommended
Added following config to my Workspace settings:
-
{
"flow.useNPMPackagedFlow": true,
"flow.pathToFlow": "${workspaceRoot}/node_modules/.bin/flow"
}
My .eslintrc is as follows:
{
"extends": ["airbnb", "plugin:flowtype/recommended"],
"plugins": ["prettier", "flowtype"],
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"jest": true,
"node": true
},
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"prettier/prettier": [
"error",
{
"printWidth": 80,
"singleQuote": true,
"useTabs": false,
"tabWidth": 2,
"semi": true,
"bracketSpacing": true
}
]
},
"settings": {
"import/resolver": {
"node": {
"paths": ["src"]
}
}
}
}
However Flow seems to be quite slow on my machine, I have added a simple function to my App.js:
const sum = (a: number, b: number) => a + b;
sum(1, '12323');
And it takes up to 10 seconds to validate my code which is quite a bummer. Is there a way to speed this up?
Maybe it's worth to start with TypeScript and don't bother with Flow?

There are some open issues regarding possible memory leaks and performance related problems with flow, some links below:
https://github.com/facebook/flow/issues/2152
https://github.com/flowtype/flow-bin/issues/70
Both tools are great and have their pros and cons, I would personally recommend to give a try to TypeScript too and perform a comparison yourself.
In my own experience on a large code base I have found TypeScript:
more performant
more types for external libraries
larger community