For quite a while I've tried getting Prettier, Eslint and Vscode to work together, but never found a solution that satisfied me. Now, as I'm working on a new React project in my day job, I finally found some time to make it work.
Wait what are Eslint and Prettier?
Eslint is a javascript linter that can help you find syntax or other errors. Eslint can be extended by plugging in pre-defined configs or completely configuring it yourself. Paired with the plugin for vscode, it can show you errors as you type.
Prettier is a code formatter for quite a few languages, including javascript. You can have code being automatically or optionally formatted with it.
Prerequisites
I assume you have basic knowledge about NPM and Vscode, as I won't cover it here. You need to have:
- Vscode installed
- NodeJS and NPM installed
Install Vscode plugins
First of all install the Vscode plugins ESLint and Prettier - Code formatter and make sure they're enabled.
Install dependencies
npm i -D eslint eslint-config-prettier eslint-plugin-prettier prettier
Setup the config files
Create an .eslintrc file in your project root.
In here we basically tell Eslint to:
- Extend from the recommended prettier config
- Register the Prettier plugin we installed
- Show Prettier errors as errors
{
"extends": [
"plugin:prettier/recommended"
],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
Note: Your eslint config can include many more rules. I'm keeping it simple and easy to grasp.
Next create a .prettierrc file in your project root.
You can tweak these settings, or add new ones as you like:
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"useTabs": false
}
Enable formatOnSave in Vscode
Look for formatOnSave and check the checkbox, or add this line to settings.json:
"editor.formatOnSave": true,
Try it out
If you kept the .prettierrc file like above, Vscode should now:
- indent your code with 2 spaces
- use single quotes instead of double
- add semicolons add the end of each line
If you're having trouble try restarting Vscode.
Top comments (6)
thank you very much for the instructions. they have been very helpful, although when i was setting up eslint and prettier in vscode for react native, i received following Parsing error: "The keyword 'import' is reserved eslint". For others who may experience the same issue, I fixed it by adding additional code to the .eslintrc file and it worked for me:
{
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"extends": ["plugin:prettier/recommended"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
Grat addition, thank you!
Thanks for the tutorial!
By the way, isn't it sufficient just to add this single string?
"extends": ["plugin:prettier/recommended"],Because it essentially does this, doesn't it?
Disable Prettier Plugin in VS Code when you setup Prettier in project.
So when formatOnSave will work as what you setup in .prettierrc
youtube.com/watch?v=YIvjKId9m2c
how to format and fix all files using one command?
I spent most of yesterday pulling my hair out trying to get this to work in vscode! XD Thank you for sharing how to do this it was very helpful ! :D