DEV Community

Discussion on: How To Set Up ESLint, TypeScript, Prettier with Create React App

Collapse
 
bmmpt profile image
Bruno Mendonca • Edited

Hey Ben,

Thanks for putting this post together.

Something didn't really work for me or I expected something it was not supposed to offer.

I have a similar configuration to what you are suggesting and if I run npx eslint src/App.tsx, I get:

6:9 error 'chaire' is assigned a value but never used @typescript-eslint/no-unused-vars

Notice that it is an "error". When I run npm start, react-script kicks in and as the app is starting I get (in my command line window):

Compiled with warnings.

./src/App.tsx
Line 6: 'chaire' is assigned a value but never used @typescript-eslint/no-unused-vars

Note that it is a warning and therefore isn't respecting my eslint configuration. And I really want it to be an error!!! :)

Here's my lint config:

module.exports = {
"extends": [
"react-app",
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"plugins": [
"react",
"@typescript-eslint",
"prettier"
],
"env": {
"browser": true,
"jasmine": true,
"jest": true
},
"rules": {
"prettier/prettier": [
"error", {
"singleQuote": true,
"tabWidth": 4
}
],
"@typescript-eslint/no-unused-vars": ["error", {
"vars": "all",
"args": "after-used",
"ignoreRestSiblings": false
}]
},
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
},
"parser": "@typescript-eslint/parser"
}

Regards,
Bruno

Collapse
 
bmmpt profile image
Bruno Mendonca

I copied the project to another folder, node_modules and all (no changes). Turns out now I get an error when react-scripts start runs:

TypeScript error in C:/BitB/auth-ui/src/App.tsx(6,11):
'chaire' is declared but its value is never read. TS6133

Looks like a typescript error and not a lint error, but I'll take it :)

However, I tried with a less problematic rule "semi": "error" and in my code import './App.css' without semicolon.

npx eslint src/App.tsx shows:

25:2 error Missing semicolon semi

But react-scripts start doesn't care about it.

Any help would be appreciated.