Prompt user to select an ESLint based lint/format config (eg Airbnb) like Vue CLI

[lloydjatkinson]

Hi,

Thank you for creating this tool!

It would be really great if create-vue could setup and configure (including with JS or TS support) a chosen ruleset - like Vue CLI does.

For example when using Vue CLI a choice is presented:

vue-create today:

I have looked into how this can be setup and honestly it's pretty hard to understand - ESLint is powerful but hard to configure correctly. There appears to be many possible solutions but once Typescript is in the mix the complexity increases for anyone, like me, that isn't that familiar with the really low level details of configuring ESLint. Even if someone is able to work through the (many) conflicting articles on setting this up there is still the reality of needing to go through the same complexity for every new project.

One of the great features of Vue CLI is that this is already configured for a user if they pick TS, ESLint, Aibnb.

Please could this prompt be added to create-vue? (and the Standard standard too for users of that)

[Reidond]

it's not that hard to bootstrap eslint config on your own, you could even make your own packages with predefined config. i personally use eslint + prettier combo and it works great

[Reidond]

Packages

{
    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.4.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.5.0",
    "prettier": "2.5.1",
    "vue-eslint-parser": "^8.3.0"
}

eslint ts integration packages

{
    "@typescript-eslint/eslint-plugin": "^5.17.0",
    "@typescript-eslint/parser": "^5.17.0"
}

Configs

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
    "vue/setup-compiler-macros": true,
  },
  parser: "vue-eslint-parser",
  parserOptions: {
    sourceType: "module",
    ecmaVersion: "latest",
  },
  plugins: ["vue", "prettier"],
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:prettier/recommended",
  ],
  rules: {
  },
};

.eslintrc.js (TS variant)

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
    "vue/setup-compiler-macros": true,
  },
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    sourceType: "module",
    ecmaVersion: "latest",
  },
  plugins: ["vue", "@typescript-eslint", "prettier"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-recommended",
    "plugin:prettier/recommended",
  ],
  rules: {
  },
};

.prettierrc.json

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false
}

.editorconfig

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf

[lloydjatkinson]

And you don’t see the value in having this already exist as an option as per what I said about Vue CLI?

Yet still this is a different setup totally to the numerous examples I’ve seen online that all set it up differently. You can’t call that “easy”.

[Reidond]

Well from my experience you can't rely on those options because they can be outdated when packages update (and they will update often) and you need to know how to setup this manually, it's really not hard.

You don't have to use examples from internet, use eslint documentation

[Reidond]

I think create-vue should be very simple to setup without unnecessary junk that people use, not knowing how to update it when things go wrong

[notpidgey]

you need to know how to setup this manually, it's really not hard.

This is such a stuck up take. Of course, you may have experience as a JS developer, but what about the people dipping their toes into Vue as their first framework? They'll be repulsed by the fact that the basic project setup does not even properly work. It's about ease of use and not about knowing or not knowing. As mentioned, Vue CLI is able to do this just fine. There is no reason this shouldn't be able to.

[lloydjatkinson]

This is an extremely poor take on the situation. Just because you don’t use it doesn’t make xyz “junk”. Vue CLI supports setting this up. You use prettier but I don’t, therefore prettier is junk?

“read the ESLint documentation” yes don’t you think I did that before creating the issue? The point you seem to have missed is that not everyone can be an expert at every tool in a stack and it would be good to have certain tooling that’s expected in a modern stack to be an option. Furthermore as I have said now twice, every resource on this takes a different approach.

With your argument, create-vue may as well not exist because “it’s not that hard” and “you can’t rely on these options” to set everything up. 🙄

I’m not really sure what the point of this was, if you aren’t willing to contribute to the conversation in a meaningful way.

Can we please stick to the topic at hand (instead of implying people are dumb because they can’t set this up) which is the possibility of getting an official “blessed” configuration choice at project creation?

[AisonSu]

Could i give a contribution with this feature request? 我可以提交一个新PR以提供这个特性吗？ @sodatea

[lloydjatkinson]

Is there no plan on implementing this?

[sodatea]

My plan:

• [x] new standard configs
• [x] new airbnb configs, almost finished, plan to release on the next workday
• [ ] check if the typescript config needs further refactoring
• [x] integrate these configs into a @vue/create-eslint-config package
• [ ] integrate that package into create-vue and @vue/cli

[AisonSu]

so the renderEslint will be transformed into a new package?if there anything i can help?

[sodatea]

Yeah, so that we can have better tests for its functionality and support Vue CLI projects.

[sodatea]

I'll post a link here after the initial prototype. Contribution to tests would be much appreciated.

[AisonSu]

looking forward to it very much

[JFGHT]

Any update on this?