Autofix Backticks with ESLint and Prettier in VS Code

Published on 2020-04-01

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

Find this article useful?

Tags: JavaScriptESLintDeveloper Experience

graphic I made of the colorado flag's C
Made with curiosity in Colorado