Have you ever wanted to configure Eslint to work correctly with Prettier and your Create React App? If so in this video you will learn the best settings to do that.
npm i -g eslint
npx create-react-app name-of-project
(needs npm 5.2+)
eslint --init
(answer the questions)
"env": {
"browser": true,
"es6": true
},
"extends": ["eslint:recommended"],
"plugins": ["react"],
"parserOptions": {
"ecmaVersion": 2018
},
"rules": {}
npm install-peerdeps --dev eslint-config-react-app
npm i -D eslint-config-prettier eslint-plugin-prettier prettier
{
"env": {
"browser": true,
"es6": true
},
"extends": ["react-app", "prettier"],
"plugins": ["react", "prettier"],
"parserOptions": {
"ecmaVersion": 2018
},
"rules": {
"prettier/prettier": [
"error",
{
"printWidth": 80,
"trailingComma": "es5",
"semi": false,
"jsxSingleQuote": true,
"singleQuote": true,
"useTabs": true
}
]
}
}
"eslint.autoFixOnSave": true
{
"scripts": {
"eslint-check": "eslint --print-config path/to/main.js | eslint-config-prettier-check"
}
}
Happy Coding !
#react #ESLint #Prettier