ESLint support about create-vue HOT 11 CLOSED

@fabien-ml Haha, the ebook and online exercises we provide will definitely use it (in fact I already have the material ready, I'm just waiting for things to stabilize a bit 🤓).

In the meantime, for those who don't have my ebook ^^, here is what I currently do:

• add the following dependencies

"@typescript-eslint/eslint-plugin": "5.5.0",
"@typescript-eslint/parser": "5.5.0",
"@vue/eslint-config-prettier": "6.0.0",
"@vue/eslint-config-typescript": "9.1.0",
"eslint": "8.3.0",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-vue": "8.1.1",
"prettier": "2.5.0",

• add the following configuration for prettier (in a dedicated file or in package.json):

  "prettier": {
    "printWidth": 140,
    "singleQuote": true,
    "arrowParens": "avoid",
    "trailingComma": "none"
  }

• add the following configuration for ESLint (tweak as you like):

module.exports = {
  root: true,
  env: {
    node: true,
    // if you use script setup
    'vue/setup-compiler-macros': true
  },
  extends: ['plugin:vue/vue3-recommended', 'eslint:recommended', '@vue/typescript/recommended', 'plugin:prettier/recommended'],
  ignorePatterns: ['dist', 'results', 'coverage', '*.d.ts'],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    // tweak as you like
  },
  overrides: [
    // if you have jest unit tests
    {
      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
      env: {
        jest: true
      }
    }
  ]
};

• add the lint script to your package.json:

"lint": "eslint --ext js,ts,vue --fix ./",

Run yarn lint and enjoy 😉

from create-vue.

I've just published new versions of @vue/eslint-config-typescript and @vue/eslint-config-prettier.
Still working on airbnb / airbnb-with-typescript / standard / standard-with-typescript.

And I haven't yet got the time to update the scaffolding process in this project. So let me put the setup instructions here for now:

(Use .eslintrc.cjs)

Basic Setup

npm i -D eslint eslint-plugin-vue

/* eslint-env node */
module.exports = {
  root: true,
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
  ],
  env: {
    "vue/setup-compiler-macros": true,
  },
}

TypeScript

npm i -D eslint @rushstack/eslint-patch eslint-plugin-vue @vue/eslint-config-typescript

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

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-typescript/recommended",
  ],
  env: {
    "vue/setup-compiler-macros": true,
  },
}

Prettier

npm i -D eslint @rushstack/eslint-patch eslint-plugin-vue prettier @vue/eslint-config-prettier

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

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "@vue/eslint-config-prettier",
  ],
  env: {
    "vue/setup-compiler-macros": true,
  },
};

TypeScript + Prettier

npm i -D eslint @rushstack/eslint-patch eslint-plugin-vue @vue/eslint-config-typescript prettier @vue/eslint-config-prettier

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

module.exports = {
  extends: [
    "plugin:vue/vue3-essential",
    "@vue/eslint-config-typescript/recommended",
    "@vue/eslint-config-prettier",
  ],
  env: {
    "vue/setup-compiler-macros": true,
  },
};

Cypress

In addition to the above-mentioned guides, add the following to the .eslintrc.cjs:

module.exports.overrides = [
  {
    files: [
      "**/__tests__/*.spec.{js,ts,jsx,tsx}",
      "cypress/integration/**.spec.{js,ts,jsx,tsx}",
    ],
    extends: ["plugin:cypress/recommended"],
  },
]

And

npm i -D eslint-plugin-cypress

from create-vue.

I would love to add ESLint support to this package.

But I'd like to have these things figured out before starting the implementation:

• I don't want the ESLint-related dependencies to bloat the project's package.json. But eslint/eslint#13481 isn't ready. So I want to do some experiments based on https://www.npmjs.com/package/@rushstack/eslint-patch first.
• I don't have a clear idea on how to integrate ESLint and Prettier best. Including .prettierrc + .eslintrc.cjs + a bunch of dev dependencies brings too much complexity IMO. I like the approach that xo takes, but it's not the best fit for the Vue ecosystem. We still need to figure out a way to reduce the complexity.

from create-vue.

+1.
Setting up ESLint and make it works with vue, typescript, cypress (and/or jest) is a pain. I find myself copy-pasting config from everywhere on the internet and I have no way to figure out if it’s done correctly.

from create-vue.

@peoray I haven't tried, but sure it should work. I don't want to go too much off track in this issue talking about my ebook, send me an email or a tweet to discuss 😉

from create-vue.

👍 Thank you for your answer @sodatea

I do agree that setting ESLint does involve adding a bunch of dependencies and config files. Abstracting this could be handy, but, on the other hand, developers can upgrade and tweak everything easily if it's just a classic ESLint+Prettier setup. At first sight, I add 2 config files and 7 dev deps to set it up manually. Would be great to provide this out of the box!
Let me know what options you prefer, and I can maybe help implement it.

from create-vue.

@cexbrayat do you have an example repo please ? or maybe you can add a section about this in your vue book ^^

from create-vue.

@cexbrayat Thank you :) Would this still work if you want to use an existing style guide like Airbnb or Standard??

Also, is there a discount for your book :)?

from create-vue.

@

@peoray I haven't tried, but sure it should work. I don't want to go too much off track in this issue talking about my ebook, send me an email or a tweet to discuss 😉

@cexbrayat I can't find your email and your twitter DM is locked :)

from create-vue.

ESLint support has been implemented and released in v3.0.6 by @sodatea

We can now generate a project with npm init vue --eslint or npm init vue --eslint-with-prettier to have ESLint and Prettier support 🎉

from create-vue.

Will airbnb still be added? (with TS support)

from create-vue.