Giter VIP home page Giter VIP logo

eslint-config-prettier's Introduction

@vue/eslint-config-prettier

eslint-config-prettier for Vue

This config is specifically designed to be used by @vue/cli & create-vue setups and is not meant for outside use (it can be used but some adaptations on the user side might be needed - for details see the config file).

A part of its design is that this config may implicitly depend on other parts of @vue/cli/create-vue setups.

Installation

Before ESLint Flat Config becomes stable, in order to work around a known limitation in ESLint, we recommend you to use this package alongside @rushstack/eslint-patch, so that you don't have to install too many dependencies:

npm add --dev @vue/eslint-config-prettier @rushstack/eslint-patch

Please also make sure that you have prettier and eslint installed.

Usage

Add "@vue/eslint-config-prettier" to the "extends" array in your .eslintrc.cjs file. Make sure to put it last, so it gets the chance to override other configs.

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

module.exports = {
  extends: [
    // ... other configs
    "@vue/eslint-config-prettier"
  ]
}

This configuration is the most straightward way to use ESLint with Prettier.

It disables all rules that are unnecessary or might conflict with Prettier. It also enables the eslint-plugin-prettier plugin, which runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

By default all formatting issues are reported as warnings, and will be automatically fixed during eslint --fix.

Use Separate Commands for Linting and Formatting

While the above setup is very straightforward, it is not necessarily the best way.

Running prettier inside the linter slows down the linting process, might clutter the editor with annoying warnings, and adds one layer of indirection where things may break. Prettier's official documentation recommends using separate commands for linting and formatting, i.e., Prettier for code formatting concerns and ESLint for code-quality concerns.

So we offered an additional ruleset to support this workflow:

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

module.exports = {
  extends: [
    // ... other configs
    "@vue/eslint-config-prettier/skip-formatting"
  ]
}

Formatting issues won't be reported with this config.

You can run prettier --check . separately to check for formatting issues, or prettier --write . to fix them.

Further Reading

The default config is based on the recommended configuration of eslint-plugin-prettier, which also depends on eslint-config-prettier. Please refer to their corresponding documentations for more implementation details.

eslint-config-prettier's People

Contributors

akryum avatar michalsnik avatar p-kuen avatar sodatea avatar st-sloth avatar visualfanatic avatar wikirik avatar yyx990803 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

eslint-config-prettier's Issues

why this plugin ignore .prettierrc? how should i use it

From my experience, for any vue project, eslint + prettier is a must and prettier config should be considered with higher priority.

I created a brand new project with npm init vue@latest, and I ticked eslint + prettier.

I created a .prettierrc file in my vue project root folder

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSpacing": true,
  "trailingComma": "all",
  "semi": false,
  "useTabs": false,
}

now my vscode starts complaining...

image

If i remove '@vue/eslint-config-prettier', from .eslintrc.js, everything works normally again.

so my question is why we have this plugin built-in in vue-cli, how should I use it.

@yyx990803 尤大

Is code in document need update?

I use the demo code in document https://vuepress-theme-hope.github.io/v2/md-enhance/zh/guide/flowchart.html

// .vuepress/config.ts
import { mdEnhance } from "vuepress-plugin-md-enhance";

export default {
  plugins: [
    mdEnhance({
      // 开启标记
      mark: true,
    }),
  ],
};

then I got erro

~/sandbox/writing main ⇡1 +54 !44 ?22 ❯ yarn docs:build                                     4s
TypeError: (0 , import_vuepress_plugin_md_enhance.mdEnhance) is not a function
    at Object.<anonymous> (/home/howtoesc/sandbox/writing/vuepress.config.ts:78:53)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.require.extensions..ts (/home/howtoesc/sandbox/writing/node_modules/@vuepress/cli/lib/utils/allowTs.js:11:11)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadUserConfigEs (/home/howtoesc/sandbox/writing/node_modules/@vuepress/cli/lib/config/loadUserConfigEs.js:9:22)
    at loadUserConfig (/home/howtoesc/sandbox/writing/node_modules/@vuepress/cli/lib/config/loadUserConfig.js:16:20)
    at /home/howtoesc/sandbox/writing/node_modules/@vuepress/cli/lib/commands/build/createBuild.js:21:58

I notice that the demo code in home page is diffrent,these errors ware disappear when I changed follow it

// .vuepress/config.ts
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";

export default {
  plugins: [
    mdEnhancePlugin({
      // 你的选项
    }),
  ],
};

Can I use it in Vite

I found it can works on Vite. But I don't know if it's the right way to use it

ESLint couldn't find the config "@vue/prettier/@typescript-eslint" after upgrading from 6.0.0 to 7.0.0

I recently upgraded @vue/eslint-config-prettier from 6.0.0 to 7.0.0.

Now eslint complains:

Oops! Something went wrong! :(

ESLint: 7.32.0

ESLint couldn't find the config "@vue/prettier/@typescript-eslint" to extend from. Please check that the name of the config is correct.

The config "@vue/prettier/@typescript-eslint" was referenced from the config file in ".../.eslintrc.js".

Can't get my head around this.

Changelog says "simplified the usage". What does this mean? How should I updated my .eslintrc.js?

Inclusion of "eslint:recommended"

Hi everyone

When I generate a project using Vue CLI and select "prettier" during the prompts, I get the following eslint extends config:

"extends": [
  "plugin:vue/essential",
  "@vue/prettier"
]

When checking the plugin:vue/essential rules I can see that no further extends is used. In the prettier config (this repo) I see that it adds eslint:recommended at the top.

As far as I understand eslint extends, this means that rules defined in eslint:recommended would override any rules defined before it (so e.g. in plugin:vue/essential, which does not matter in this case as there is no overlap).

Now if I were to add our own set of rules, I would ideally put it before the @vue/prettier config as I want to benefit from the eslint-config-prettier defined within it (to disable possible code-style rules). But this would also mean that this set of rules can't contradict eslint:recommended as that one has higher priority (comes later in the array) and would overrule all conflicting custom rules. If I were to put the config after @vue/prettier I would have to make sure to either not include anything that conflicts with the rules in eslint-config-prettier or possibly duplicate this in the "extends" array to come last.

So what I would like:

"extends": [
  "my-custom-rules",
  "plugin:vue/essential",
  "@vue/prettier"
]

Which would result in my-custom-rules to be overruled by eslint:recommended.

What would might be possible:

"extends": [
  "plugin:vue/essential",
  "@vue/prettier"
  "my-custom-rules",
  "eslint-config-prettier"
]

Duplicating the eslint-config-prettier rules.

Is there a special reason for including eslint:recommended in this config? Might it be better to remove that and allow vue-cli to generate a config like this:

"extends": [
  "eslint:recommended",
  "plugin:vue/essential",
  "@vue/prettier"
]

Which would be clearer and make it easy to add custom configs.

update plugin with pnpm

step 1: pnpm upgrade
the console show

 WARN  Issues with peer dependencies found
.
└─┬ @vue/eslint-config-prettier
  └── ✕ unmet peer eslint-plugin-prettier@^3.1.0: found 4.0.0

does it only support versions below 4.0.0 with eslint-plugin-prettier

Vue CLI is not working.

Hello.
I have created new vue project and when I want to run it via "npm run serve" command, I got problem and I don't know the solution. I have searched a lot.
This is an image for the problem :
Untitled

  • Please help.

Please add a license file

Please add a license file so that the source can be safely used in commercial applications.

Thank you!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.