• Home >
  • Notes >
  • Autofix Backticks with ESLint and Prettier in VS Code

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

Published on 2020-04-01

Note Explorer