Autofix Backticks with ESLint and Prettier in VS Code

Essays and updates on product, engineering, and AI by Chase Adams.

1 minute read

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:

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
  },
}

First Cohort

No Coding Experience Required

Learn to create and deploy professional websites using ChatGPT and Claude. Go from complete beginner to confident website builder.