Tools

EditorConfig

Purpose: Helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs by standardizing basic formatting settings.

Configuration File: .editorconfig

VS Code: EditorConfig support requires installing the "EditorConfig for VS Code" extension.

IntelliJ/WebStorm: Both IntelliJ IDEA and WebStorm support EditorConfig natively. Ensure the EditorConfig plugin is enabled in Preferences -> Plugins.

Prettier

Purpose: An opinionated code formatter that supports many languages and integrates with most editors. It enforces a consistent style by parsing your code and re-printing it with its own rules.

Configuration File: .prettierrc

VS Code: Install the "Prettier - Code formatter" extension. You can configure it to format on save by adding to your settings.json:

{

  "editor.formatOnSave": true,

  "prettier.configPath": "./.prettierrc"

}

IntelliJ/WebStorm: In the settings (Preferences -> Languages & Frameworks -> JavaScript -> Prettier), specify the path to Prettier and configure it to format code on save or with a keyboard shortcut.

ESLint

Purpose: A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript, with the aim of making code more consistent and avoiding bugs.

Configuration File: .eslintrc.json

VS Code: Install the "ESLint" extension. To enable automatic fixing on save, add to your settings.json:

{

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": true

  }

}

IntelliJ/WebStorm: ESLint is supported out of the box. Enable it in Preferences -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint. You can configure the IDE to use the project's ESLint package and to fix issues on save.

Rules

EditorConfig

Use space instead of tab for indent: Indentation should be done with spaces, not tab characters, to ensure consistent indentation across different editors and environments.

Windows style line end: Files should use Windows-style line endings (\r\n), which can be important for cross-platform compatibility and consistency.

2 space for indent: Each indentation level should consist of 2 spaces, making the code structure easier to read without taking up as much horizontal space as larger indents.

Line width 120: Lines of code should aim to be no longer than 120 characters, improving readability and maintainability by avoiding overly long lines that require horizontal scrolling.

Insert final newline: Ensure that files end with a newline character, which can help with UNIX compatibility and processing files in a command line.

Trim trailing whitespace: Remove any spaces or tabs at the end of lines, which can help prevent unnecessary changes in version control and make the code cleaner.

Prettier

Double quote: Strings should be enclosed in double quotes (") instead of single quotes ('), ensuring consistency across the codebase.

No trail comma: Do not include trailing commas in objects and arrays, which can lead to cleaner code and avoid potential issues in languages or environments that do not support them.

ESLint

TypeScript member ordering: Enforce a consistent order for class members, which can enhance readability and organization within class structures.

TypeScript no explicit any: Avoid using the any type in TypeScript, encouraging more precise typing and thereby improving type safety and code quality.