VSCode + ESLint - TwoGears/hakomo-guides GitHub Wiki
Original guide, that is unfortunately outdated: https://medium.com/@sgroff04/configure-eslint-prettier-and-flow-in-vs-code-for-react-development-c9d95db07213
- https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode
- https://marketplace.visualstudio.com/items?itemName=dzannotti.vscode-babel-coloring
npm install babel-eslint --save-dev
.eslintrc should be with the following settings:
{
"parser": "babel-eslint",
"extends": "airbnb",
"plugins":[
"react",
"jsx-a11y",
"import"
]
}npm install prettier-eslint --save-dev
Following this article it looks like all we need to do is install the right version.
React Native makes a file .flowconfig. Open it - you should see the version of Flow on the bottom. Use that version to install Flow:
npm i -D [email protected] (and replace 0.122.0 with your version)
npm install [email protected] @babel/preset-flow --save-dev
open the file .babel.config.js add @babel/preset-flow and below presets add retainLines: true, like that:
module.exports = {
presets: ['module:metro-react-native-babel-preset', '@babel/preset-flow'],
retainLines: true,
};Note: module:metro-react-native-babel-preset is for react native
CMD+, then Workspace Settings then {} sign to open the json and paste:
{
// Format a file on save. A formatter must be available, the file must not be auto-saved, and editor must not be shutting down.
"editor.formatOnSave": true,
// Support using flow through your node_modules folder, WARNING: Checking this box is a security risk. When you open a project we will immediately run code contained within it.
"flow.useNPMPackagedFlow": true,
// Enable/disable JavaScript validation. (For Flow)
"javascript.validate.enable": false,
// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,
// Use 'prettier-eslint' instead of 'prettier'. Other settings will only be fallbacks in case they could not be inferred from eslint rules.
"prettier.eslintIntegration": true,
"eslint.autoFixOnSave": true
}