This setup has been merged and moved to https://github.com/xypnox/JSsick/blob/master/React/README.md and will be subsequently updated there. The content below may become out of date as such.
Install ESLint plugin for VSCode: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
This must be run on a per project basis. Although you can install it globally as well.
yarn add eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react prettier eslint-config-prettier eslint-plugin-prettier -D
This file should be located at the root directory of your react project and is used as settings for eslint. These settings work well for me. Modify them as you please.
{
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"rules": {
"react/jsx-filename-extension": [
1,
{
"extensions": [
".js",
".jsx"
]
}
],
"no-console": 0,
"react/no-unused-state": 1,
"prettier/prettier": [
"warn",
{
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 100
}
]
},
"parser": "babel-eslint",
"plugins": [
"prettier"
]
}These are the settings for VSCode. They can e edited by going to settings (Ctrl + ` ) then clicking the {} icon.
{
// ... Other Settings ...
// ESLint
// formatting using eslint
// let editor format using prettier for all other files
"editor.formatOnSave": true,
// disable editor formatting, so eslint can handle it
"[javascript]": {
"editor.formatOnSave": false,
},
// available through eslint plugin in vscode
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
}