It can be a bit annoying to configure eslint to work together with prettier, because of some unwanted conflicts and because we need 2 configuration files and 2 extensions: .eslint and .prettier. There is a simpler way to do this, avoiding having 2 different files and reducing the chance of conflicts. Let's go:
Choose the settings that best suit your style
yarn eslint --init
we'll use prettier as an eslint plugin.
yarn add eslint-plugin-prettier prettier -D
add prettier in array of plugins
"plugins": [
"react",
"prettier"
],
add the prettier configs into 'rules' following this format, You are free to choose the styles that suit you best.
"rules": {
"prettier/prettier": [
"error",
{
"printWidth": 80,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "all",
"arrowParens": "always",
"semi": false
}
]
}
the eslint file should look like this:
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"standard-with-typescript",
"plugin:react/recommended"
],
"overrides": [
{
"env": {
"node": true
},
"files": [
".eslintrc.{js,cjs}"
],
"parserOptions": {
"sourceType": "script"
}
}
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"prettier"
],
"rules": {
"prettier/prettier": [
"error",
{
"printWidth": 80,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "all",
"arrowParens": "always",
"semi": false
}
]
}
}
Conclusion
From this simple configuration, you can specify more eslint rules to suit your project.
Twitter: https://twitter.com/Thzinhdev
Eslint config: https://gist.github.com/Thiago-Mota-Santos/60ec2ba0c88d2ef00b9d8b9e590b1cf7#file-gistfile1-txt
Thumb by Ryan Quintal at Unsplash
Top comments (0)