These are my settings for ESLint and Prettier with some minor modifications over the ones from Wes Bos
- You need a
package.json
file, so run this command if you dont have it:
npm init
- Install everything needed for it to run:
npx install-peerdeps --dev @braisc/eslint-config
- Create an
.eslintrc.json
file in the root of your project's directory with this content:
{
"extends": ["@braisc"]
}
- Create a
.babelrc.json
file in the root of your project's directory with this two presets, the second one only if you are using React:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
- You can add two scripts to your
package.json
to lint and/or fix:
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
},
- Now you can manually lint your code by running
npm run lint
and fix all fixable issues withnpm run lint:fix
. You probably want your editor to do this though.
You need eslint installed globally to make it work nice with VSCode
npm install --global eslint
- Install the ESLint package
- Now we need to setup some VS Code settings via
Code/File
→Preferences
→Settings
. It's easier to enter these settings while editing thesettings.json
file, so click the{}
icon in the top right corner:
// These are all my auto-save configs
"editor.formatOnSave": true,
// turn it off for JS/JSX/TS, we will do this via eslint
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"[typescript]": {
"editor.formatOnSave": false
},
// tell VSCode to autofix also TypeScript and html
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html"
],
// tess ESlint to fix on filesave
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS/JSX/TS since we are doing it through Eslint already
"prettier.disableLanguages": ["javascript", "typescript", "javascriptreact"],