Search code examples
javascripteslintprettierprettier-eslint

How to add prettier config into eslint config?

Note, I do not want semicolons used in my JS project.

YouTube video

I tried disabling it in the .eslintrc.cjs file, however the strange thing is that semi: 0 did not work to disable the warnings over missing ;. However semi: false did disable the warnings in VScode.

However it seemed my problem was related to prettier, so I added the prettier config to my eslint file and used semi: false in there it worked. But when I run npm run lint I get the following error:

enter image description here

My config

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution")

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-prettier",
  ],
  rules: {
    semi: 0,
  },
  prettier: {
    rules: {
      semi: false
    },
  },
  overrides: [
    {
      files: ["cypress/e2e/**.{cy,spec}.{js,ts,jsx,tsx}"],
      extends: ["plugin:cypress/recommended"],
    },
  ],
};

If I remove that prettier block note I will get the warnings again in my code:

enter image description here

My package.json file (created by Vue)

{
  "name": "moonholdings.xyz",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 4173",
    "test:unit": "vitest --environment jsdom",
    "test:e2e": "start-server-and-test preview http://127.0.0.1:4173/ 'cypress open --e2e'",
    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:4173/ 'cypress run --e2e'",
    "build-only": "vite build",
    "prettier": "prettier --write .",
    "lint": "eslint . && prettier --check ."
  },
  "dependencies": {
    "pinia": "^2.0.14",
    "vue": "^3.2.36",
    "vue-router": "^4.0.15"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.0",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vitejs/plugin-vue-jsx": "^1.3.10",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/test-utils": "^2.0.0",
    "cypress": "^10.0.2",
    "eslint": "^8.5.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-vue": "^9.0.0",
    "jsdom": "^19.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.5.1",
    "sass": "^1.53.0",
    "start-server-and-test": "^1.14.0",
    "vite": "^2.9.9",
    "vitest": "^0.13.0",
    "vue-tsc": "^0.35.2"
  }
}
Solution

  • Figured it out, needed to disable the ESlint extension in VScode, it was overriding my config files. Also this extension isn't needed.

    enter image description here