Blog _A.Wolf

You can configure VS Code for your current workspace by creating a folder .vscode in the root of your project as mentioned in the docs.

In this post, I'd like to summarize my VS Code configuration to have a quick reference. I'll update this post if I change my setup or if there are new extensions or tools to use during development.

Inside the .vscode folder create the following files - we will add the content in a second:

• settings.json for your workspace settings (e.g. spaces, lint on save, etc)
• extensions.json for your recommended extensions
• launch.json for debugging inside VS Code. I'm not going into details but you can read more about it here and in my post Debugging a web app in VS code

settings.json

We're configuring the workspace for React, so some parts are React specific and could be changed if you're using a different framework.

{
  "editor.tabSize": 2,
  "search.exclude": {
    "**/node_modules": true
  },
  "editor.formatOnSave": true,
  //disable default javascript validator replaced by eslint
  "javascript.validate.enable": false,
  "eslint.enable": true
}

Here we're configuring our editor tab size, so it's using 2 spaces.

search.exclude will increase the speed of your file search (search accessed with Ctrl+p or Cmd+p) as we don't have to search in node_modules folder - so you can quickly switch between files.

editor.formatOnSave is used to run Prettier on every save. For details to Prettier setup, please have a look here - I'm using pretty-quick to run prettier also on pre-commit, so you're running Prettier before committing. Lint-staged would also work but I prefer pretty-quick.

Don't forget to add husky to your package.json:

  ...
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },
  ...

.prettierrc file in the root of your project:

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 70
}

The last two keys in the settings file are for linting your files - requires a separate configuration file .eslintrc.js. I'd recommend using babel-eslint as the parser, so linting a React app is working as expected.

I've also noticed that a restart of VS code could be required if you install the Eslint VS Code plugin or change its configuration - I had a problem with import is reserved warning.

Here is my .eslintrc.js file:

module.exports = {
  extends: ['react-app', 'plugin:jest/recommended'],
  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 6,
    allowImportExportEverywhere: true,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      modules: true,
    },
  },
  rules: {
    'no-unused-vars': 1,
    'no-shadow': 2,
    'jest/no-large-snapshots': ['warn', { maxSize: 100 }],
  },
  overrides: [],
};

Note: babel-eslint requires babel to be configured. So if you don't have it, please have a look here for the usage.

The babel.config.js file looks like the following:

const presets = [
  [
    '@babel/env',
    {
      targets: {
        edge: '17',
        firefox: '60',
        chrome: '67',
        safari: '11.1',
      },
      useBuiltIns: 'usage',
    },
  ],
];

module.exports = { presets };

extensions.json

You can create the template for the file by starting (Ctrl+Shift+p & Cmd+Shift+p), type extension configure and hit enter. This will create the empty extensions.json file for you.

My extensions.json looks like this:

{
  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp

  // List of extensions which should be recommended for users of this workspace.
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "jpoissonnier.vscode-styled-components"
  ],
  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
  "unwantedRecommendations": []
}

Brief explanation to the extensions:

• dbaeumer.vscode-eslint for linting
• esbenp.prettier-vscode for running prettier
• jpoissonnier.vscode-styled-components for syntax highlighting of styled-components

I'll extend the list if I'm using another one. If you're having an extension that you're using for your Javascript development, please let me know and add a comment below.

For a project with Typescript you would change from eslint to tslint and use the extension ms-vscode.vscode-typescript-tslint-plugin.

Conclusion

I think with the mentioned setup the dev. experience is pretty good. As Prettier is automatically styling your code, so you don't have to care about spaces or quotes, etc.

It will be automatically consistently styled on save and pretty-quick will check that everyone who commits will use prettier - for users that are not using the VS Code Prettier extension.

If you'd like to customize Prettier e.g. add space inside parens, you will have a hard time because Prettier customization is hard or not possible. If you like to customize it anyway, please have a look for Standard or Standardx.

I prepared a pull-request for Boostnote here, which is adding Standardx to match the style of the repository. It should show you how to have code formatting with some modifications but I wouldn't recommend it.

I'd use Prettier as they picked some good defaults.

Troubleshooting

• If Husky is not runing on commit (no message from a pre-commit script), please check .git/hooks folder of your project there should be a pre-commit hook. If there are just samples, remove Husky with yarn remove husky and install it again with yarn add husky -D.

Seems like an issue with Husky, as mentioned in this issue.