Comprehensive Guide to Configuring EditorConfig, ESLint, Stylelint, and Prettier for Frontend Projects

In daily development we encounter many projects with different architectural choices and coding conventions, which often cause linting errors when a new project is started. Having a unified configuration that automatically fixes all rule violations on file save greatly improves developer experience and efficiency.

EditorConfig

EditorConfig provides a basic set of formatting rules (indentation, line endings, charset, etc.) that apply across editors and languages. To use it you need to install the EditorConfig plugin (if not built‑in) and add a .editorconfig file to the project root.

# .editorconfig example
root = true
[*]
indent_style = space
indent_size = 2
tab_width = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

ESLint

ESLint is a pluggable JavaScript static analysis tool that parses code into an AST and matches patterns to enforce style rules. To enable automatic fixing on save you should:

Install eslint and a shareable config such as eslint-config-airbnb (or another preset).

Install the VSCode ESLint extension.

Add a .eslintrc.js configuration file.

Modify settings.json to run ESLint on save.

The recommended way is to use editor.codeActionsOnSave with source.fixAll.eslint and disable the generic editor.formatOnSave to avoid double formatting.

// settings.json snippet
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"[vue]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.alwaysShowStatus": true

Typical .eslintrc.js content includes environment settings, parser options, extends, plugins, and rule customizations. For example:

module.exports = {
  env: { browser: true, node: true },
  parser: 'babel-eslint',
  extends: ['airbnb'],
  plugins: ['react-hooks'],
  rules: {
    eqeqeq: 'off',
    curly: 'error',
    quotes: ['error', 'double']
  }
};

Vue Specific Configuration

Vue single‑file components need special handling. Install the Vetur plugin for syntax highlighting, then disable Vetur’s formatting and validation in settings.json so ESLint can take over.

"vetur.format.enable": false,
"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false

A Vue‑focused .eslintrc.js might look like this:

module.exports = {
  root: true,
  env: { browser: true, node: true },
  parser: 'vue-eslint-parser',
  parserOptions: { parser: 'babel-eslint' },
  extends: ['@nuxtjs', 'plugin:nuxt/recommended', 'plugin:vue/base', 'plugin:vue/vue3-recommended'],
  plugins: ['vue'],
  rules: {
    indent: ['error', 2, { SwitchCase: 1 }],
    'vue/html-indent': ['error', 2]
  }
};

React Specific Configuration

For React projects, install eslint-plugin-react and eslint-plugin-react-hooks . Add the plugins to .eslintrc.js and enable the recommended rule sets.

module.exports = {
  plugins: ['react', 'react-hooks'],
  extends: ['plugin:react/recommended', 'plugin:react/jsx-runtime'],
  parserOptions: { ecmaFeatures: { jsx: true } },
  rules: {
    'react/jsx-no-undef': ['error', { allowGlobals: true }]
  }
};

StyleLint

To lint CSS/SCSS/LESS and the style blocks inside Vue files, install stylelint , stylelint-config-standard , and stylelint-scss , then add a .stylelintrc file and configure VSCode.

// settings.json additions for Stylelint
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll.stylelint": true
},
"stylelint.validate": ["css","html","less","postcss","sass","scss","source.css.styled","styled-css"]

Prettier

Prettier is an opinionated code formatter that can be set as the default formatter in VSCode. To avoid conflicts with ESLint, configure editor.codeActionsOnSave to run both ESLint and Prettier fixes, or disable one of them for specific file types.

// example VSCode formatter settings
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"editor.defaultFormatter": null, // disable for all files
"[javascript]": { "editor.defaultFormatter": null }

By following the steps above, you can achieve consistent code style enforcement and automatic formatting for JavaScript, Vue, React, and style files across your frontend projects.