Autofix Backticks with ESLint and Prettier in VS Code

Learn how to autofix backticks in JavasScript with ESLint and Prettier in VS Code.

thumbnail for Autofix Backticks with ESLint and Prettier in VS Code

If you're using Prettier and want to have backticks be the character that wraps strings, you need to do the following:

Install the following ESLint npm packages:

  • eslint-config-prettier
  • eslint-plugin-prettier

Update your eslintrc.js with this rule:

module.exports = {
  rules: {
    quotes: ["error", "backtick"],
  },
}

and your .prettierrc.js with this config:

module.exports = {
  singleQuote: false,
}

Add this to settings.json in VS Code:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

Was this page helpful?

Subscribe to my Newsletter

Every other week I publish the Curiously Crafted newsletter.

In it, I explore the intersection of curiosity and craft: the people who make stuff, what they make and the way they pursue the craft of making.

The curious logo of Chase Adams: glasses and a bow tie.stay curious.