Prettier and / or Eslint?

Question

Most of the projects I work on I just fire up and, at most, disable a linting rule that bugs me. That is to say I don't know much about linting and linters except that eslint is everywhere.

A Vue project I'm working on now (that I did not initially build) has four linting modules and I now want to understand if all of them are necessary, if they are conflicting with each other or complimenting each other. I'm getting so many yellow warnings that don't get fixed with the --fix flag that I want to uninstall everything and install one linter to rule them all.

The project package.json has these:

{
  "eslint": "^7.3.1",
  "eslint-plugin-prettier": "^3.1.1",
  "eslint-plugin-vue": "^6.2.2",
  "lint-staged": "^10.2.7"
}

Thoughts?

My eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "off" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "max-len": [0, 0, 0],
    singleQuote: 0,
    trailingComma: 0,
    "no-unused-vars": 0,
    "vue/no-unused-components": 0,
  },
  parserOptions: {
    parser: "babel-eslint",
  },
  overrides: [
    {
      files: ["**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"],
      env: {
        jest: true,
      },
    },
  ],
};

Answer 1

Not sure if I can give a direct answer, but it's super common to combine eslint along with prettier via eslint-plugin-prettier. We use prettier purely for code formatting rules like:

• single vs double quotes
• max line length
• semicolons or not

eslint is more commonly used to find errors in your code that otherwise wouldn't have been caught until runtime. Not every rule in eslint can be fixed via eslint --fix, but many can be. What does your .eslintrc look like?