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.
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.
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.
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.
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.
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.