To configure Prettier to work with ESLint in VSCode, first install the required packages: eslint, prettier, eslint-config-prettier, and eslint-plugin-prettier via npm; next, update your .eslintrc.js file to include 'plugin:prettier/recommended' in extends to integrate both tools; then create a .prettierrc file to define formatting preferences; afterwards, configure VSCode settings to enable format on save, set Prettier as the default formatter, and ensure ESLint is enabled and runs on type; finally, optionally resolve conflicts by checking config files and ensuring workspace versions of ESLint and Prettier are used.
Configuring Prettier to work with ESLint in VSCode is a common setup for JavaScript/TypeScript developers who want consistent code formatting and linting. The key is to make sure they don’t conflict and that one doesn’t override the other. Here’s how to do it right.
Install Required Packages
Before configuring settings in VSCode, you need to install the right npm packages in your project:
eslintprettier-
eslint-config-prettier(to disable conflicting rules) -
eslint-plugin-prettier(to make ESLint and Prettier work together)
Run this command in your project root:
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
If you’re using TypeScript or React, you may need additional plugins like @typescript-eslint/eslint-plugin or eslint-plugin-react.
Configure ESLint and Prettier to Work Together
Create or update your .eslintrc.js (or .eslintrc.json) file with the following setup:
module.exports = {
root: true,
env: {
es2021: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:prettier/recommended', // This line does most of the integration work
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
rules: {
// Custom rules go here
},
};This setup tells ESLint to respect Prettier’s formatting rules and disables ESLint rules that would otherwise conflict with Prettier.
Also, make sure you have a .prettierrc file in your project root to define your formatting preferences, like:
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}Set Up VSCode to Format on Save with Both Tools
Now that the packages and config files are in place, you need to tell VSCode how to apply them.
- Open VSCode settings (
Cmd ,on Mac orCtrl ,on Windows). - Search for "format on save" and enable it.
- Search for "default formatter" and set it to
Prettier - Code formatter. - Create or update
.vscode/settings.jsonin your project with:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.enable": true,
"eslint.run": "onType",
"eslint.format.enable": true
}This ensures that:
- ESLint checks your code as you type.
- Prettier formats on save.
- ESLint rules are applied as formatting rules via Prettier integration.
Optional: Fix Conflicts Manually (If Needed)
Sometimes, especially in older projects, you might still run into conflicts. In that case:
- Check if both tools are using the same config files.
- Make sure no other ESLint configs are overriding the
plugin:prettier/recommendedline. - You can temporarily disable ESLint or Prettier to test which one is causing the issue.
Also, make sure your project is using the workspace version of ESLint and Prettier rather than the global one. You can configure this in VSCode under ESLint: Use Workspace Version.
That’s the core setup. It’s not too complicated once you get the config files right, but it can go wrong in small ways if versions or settings don’t match.
The above is the detailed content of How to configure Prettier to work with ESLint in VSCode?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to change the default terminal in vscode settings?
Jul 05, 2025 am 12:35 AM
There are three ways to change the default terminal in VSCode: setting through a graphical interface, editing settings.json file, and temporary switching. First, open the settings interface and search for "terminalintegratedshell" and select the terminal path of the corresponding system; secondly, advanced users can edit settings.json to add "terminal.integrated.shell.windows" or "terminal.integrated.shell.osx" fields and escape the path correctly; finally, you can enter "Terminal:SelectD through the command panel
How do I resolve 'command not found' errors in the VS Code terminal?
Jul 04, 2025 am 12:50 AM
1. Confirm whether the command is installed 2. Check the terminal shell type 3. Update the PATH environment variable 4. Restart VSCode or terminal. When you enter a command in the VSCode terminal, you should first check whether the command has been installed correctly and can be verified through other terminals of the system; secondly, confirm the shell type used by VSCode and check its configuration file; then make sure that the path where the command is located has been added to the PATH environment variable, and manually add and reload the configuration if necessary; finally close and reopen the terminal or restart VSCode to make the changes take effect.
How do I use VS Code's settings sync feature?
Jul 03, 2025 am 12:43 AM
TosyncVSCodesettingsacrossdevices,signinwithaGitHuborMicrosoftaccount,customizewhatgetssynced,andmanuallytriggersyncwhenneeded.First,openVSCodeandsigninviatheprofileiconorCommandPaletteusing"Sync:TurnonSync".Next,choosewhattosyncsuchassetti
Fixing 'Timed out waiting for the debugger to attach' in VSCode
Jul 08, 2025 am 01:26 AM
When the "Timedoutwaitingforthedebuggertoattach" issue occurs, it is usually because the connection is not established correctly in the debugging process. 1. Check whether the launch.json configuration is correct, ensure that the request type is launch or attach and there is no spelling error; 2. Confirm whether the debugger is waiting for the debugger to connect, and add debugpy.wait_for_attach() and other mechanisms; 3. Check whether the port is occupied or firewall restricted, and replace the port or close the occupied process if necessary; 4. Confirm that the port mapping and access permissions are configured correctly in a remote or container environment; 5. Update VSCode, plug-in and debug library versions to solve potential
What are VS Code workspaces, and how are they used?
Jul 10, 2025 pm 12:33 PM
VSCode workspace is a .code-workspace file that saves project-specific configurations. 1. It supports multi-root directory, debug configuration, shortcut key settings and extension recommendations, and is suitable for managing different needs of multiple projects. 2. The main scenarios include multi-project collaboration, customized development environment and team sharing configuration. 3. The creation method is to save the configuration through the menu File>SaveWorkspaceAs.... 4. Notes include distinguishing between .code-workspace and .vscode/settings.json, using relative paths, and avoiding storing sensitive information.
How to set environment variables for the terminal in VS Code settings on Linux?
Jul 06, 2025 am 12:23 AM
There are two ways to set environment variables for VSCode terminals on Linux: one is to use the terminal.integrated.env.linux configuration item to define variables that are only used by VSCode; the other is to modify the shell configuration file to take effect globally. 1. In VSCode, add variables such as "MY_VAR":"my_value" by setting the terminal.integrated.env.linux field. This method only affects the VSCode terminal; 2. Modify shell configuration files such as ~/.bashrc or ~/.zshrc and add exportMY
How to set environment variables for debugging in vscode settings?
Jul 10, 2025 pm 01:14 PM
To set debug environment variables in VSCode, you need to use the "environment" array configuration in the launch.json file. The specific steps are as follows: 1. Add "environment" array to the debugging configuration of launch.json, and define variables in key-value pairs, such as API_ENDPOINT and DEBUG_MODE; 2. You can load variables through .env files to improve management efficiency, and use envFile to specify file paths in launch.json; 3. If you need to overwrite the system or terminal variables, you can directly redefine them in launch.json; 4. Note that
Where is the vscode settings.json file located?
Jul 14, 2025 am 01:21 AM
To access the settings.json file of VSCode, you can directly open it through the command panel (Ctrl Shift P or Cmd Shift P). The default storage location of the file varies according to the operating system. Windows is in %APPDATA%\Code\User\settings.json, macOS is in $HOME/Library/ApplicationSupport/Code/User/settings.json, Linux is in $HOME/.config/Code/User/
