Setting Up Your Editor

You can work on fe architecture using any editor or IDE, but there are a few extra steps introdcued that make your coding experience is as good as it can be.

VS Code

To get the best editing experience with VS Code, the project include a jsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": "app",
    "module": "commonjs",
    "target": "es2016",
    "jsx": "react",
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

This jsconfig.json file tells VS Code to treat all JS files as part of the same project, improving IntelliSense, code navigation, and refactoring. You can configure project wide settings in using the jsconfig.json, such as only allowing functions from the ES5 standard library, or even enable more advanced type checking for JS files.

ESLint + Prettier integration

You can also get VSCode to understand your project's static code analysis setup. If you do this:

To make this happen, install both the ESLint and Prettier extensions for VSCode and add the following to either your User or Workspace Settings:

{
  "editor.formatOnSave": true,
  "prettier.eslintIntegration": true,
  "eslint.run": "onSave"
}

Here's also a detailed video on the topic: How to Setup VS Code + Prettier + ESLint