Although we don't prescribe the tools you use to develop the portal, we strongly recommend using Webstorm or VSCode. Without the extensions available in these IDE's, changes made could conflict with formatting or style rules that will lead to automatic changes on unrelated branches in future.
A lot of the project-specific settings in Webstorm are committed to our git repository, and you should inherit this configuration automatically. Some optional settings you may want to consider are listed below.
By default we recommend the following settings for both ESlint and Prettier.
You can change your KeyMap under File | Settings | Keymap. A good option is the Visual Studio keymap, as this will give you consistent keyboard shortcuts with Visual Studio / Rider, and is also the most commonly used keymap by developers at Particular.
- To improve the quality of suggestions you receive when using code completion, go to
File | Settings | Editor | General | Code Completionand enableOnly type-based completion.
This option will run a formatter on every save, which is very quick
- Install the Prettier extension
- In VSCode
File | Preferences | Settings, set default formatter to Prettier and check 'Format on Save'
- In VSCode
- Ensure you run
npm run lintbefore committing code, to identify any style or code issues
This option runs the formatter and linter on every save. It will be slower than option 1, but the solution is rather small so the impact shouldn't be large.
- Install the ESLint extension
- enable the following user setting (there is no UI for this, but you can find the codeActionsOnSave setting in
File | Preferences | Settingswhich will open the settings file at the correct location for you):
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}