Vue-cli: how to edit '@vue/prettier' rules

[mimimile]

i want to edit '@vue/prettier' rules
like

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/essential',
    '@vue/prettier',
    '@vue/typescript'
  ],
  'rules': {
    '@vue/prettier/semi': false,

    'semi': ['error', 'never'],
    'no-plusplus': ['off'],
    'no-param-reassign': ['off'],
    'no-console': ['error', { allow: ['error', 'warn'] }],
  }
}

but it don't work

what should i do?

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!

[Aysnine]

@mimimile

in my package.json, just edit rules:

    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {
      "prettier/prettier": [
        "warn",
        {
          "#": "prettier config in here :)",
          "singleQuote": true,
          "semi": false,
          "trailingComma": "none"
        }
      ]
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }

about config option of prettier : https://prettier.io/docs/en/options.html

other way around: https://cli.vuejs.org/config/#eslint

[Aysnine]

you can search this get more example :)

[y0n3r]

@Aysnine Thanks so much. This is super helpful. I was wondering why my project was ignoring my .prettierrc file! Instead of putting it in my package.json file directly, I just defined the rules you have above direction inside of .eslintrc (which extends prettier in my project). Again, thank you!

[Zver64]

@mimimile

in my package.json

    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {
      "prettier/prettier": [
        "warn",
        {
          "#": "prettier config in here :)",
          "singleQuote": true,
          "semi": false,
          "trailingComma": "none"
        }
      ]
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }

about config option of prettier : https://prettier.io/docs/en/options.html

I followed your suggestion but it seems to work partially. I work in Webstorm. So the 'Fix eslint problems' option works as expected and changes this code:

import { Button, Select } from "element-ui";
import Vue from "vue";
Vue.use(Button);
Vue.use(Select);

to this:

import { Button, Select } from 'element-ui'
import Vue from 'vue'
Vue.use(Button)
Vue.use(Select)

This is exactly what i need.
But I have warnings in my console when compiling, for instance:

warning: Insert `;` (prettier/prettier) at src/element-config.js:3:16:
  1 | import { Button, Select } from 'element-ui'
  2 | import Vue from 'vue'
> 3 | Vue.use(Button)
    |                ^
  4 | Vue.use(Select)
  5 | 

Is there something I am doing wrong?

[Zver64]

I also found out that everything works well if I choose to keep settings in separate files and add my custom settings in .eslintrc.js instead of package.json like this:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true,
        semi: false,
        trailingComma: 'none'
      }
    ]
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

[Aysnine]

@Zver64 This depends on the choice you make when initializing the project using the vue-cli.

About eslint config: https://cli.vuejs.org/config/#eslint

Different ways, but same configuration.

[Zver64]

@Zver64 This depends on the choice you make when initializing the project using the vue-cli.

About eslint config: https://cli.vuejs.org/config/#eslint

Different ways, but same configuration.

Yes, this is what I was talking about. Everything works as expected if I choose "In dedicated config files" option and add my settings in these dedicated files. But I have the bug I described above when I choose "In package.json" option and try to set my own settings in package.json.

[andrevmatos]

Can confirm, setting eslintConfig inside package.json is respected by IDE and by vue-cli-service lint, but vue-cli-service [serve|build] still print warnings (e.g. for longer lines when setting printWidth to 99)

[EugeneDae]

How can I disable Prettier for HTML and CSS code in .vue files in a Vue CLI project?