vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.83k stars 396 forks source link

Volar remove the line break after the opening tag #1733

Closed zakariamehbi closed 2 years ago

zakariamehbi commented 2 years ago

Volar format my text and remove the line break after the opening tag (<VButton>).

// With Volar 
<VButton
    color='primary'
    icon='fas fa-plus'
    elevated
    @click.capture='openFormModal()'
>Ajouter un bail</VButton>
// Should be
<VButton
    color='primary'
    icon='fas fa-plus'
    elevated
    @click.capture='openFormModal()'
>
    Ajouter un bail
</VButton>
// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    tsconfigRootDir: __dirname,
  },
  extends: [
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:vue/vue3-recommended',
    'plugin:vuejs-accessibility/recommended',
    // 'prettier',
  ],
  plugins: ['@typescript-eslint'],
  // plugins: ['@typescript-eslint', 'prettier-vue'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': ['error'],
    'vuejs-accessibility/interactive-supports-focus': 'off',
  },
  overrides: [
    {
      files: ['*.md'],
      parser: 'markdown-eslint-parser',
      // extends: ['plugin:md/recommended', 'prettier'],
      extends: ['plugin:md/recommended'],
    },
    {
      files: ['*.vue'],
      extends: [
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:vue/vue3-recommended',
        'plugin:vuejs-accessibility/recommended',
        // 'plugin:prettier-vue/recommended',
        // 'prettier',
      ],
      rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'vue/script-setup-uses-vars': 'error',
        'vue/multi-word-component-names': 'off',
        'no-unused-vars': 'off',
        '@typescript-eslint/no-unused-vars': ['error'],

        'vuejs-accessibility/form-control-has-label': 'off',
        'vuejs-accessibility/label-has-for': 'off',
        'vuejs-accessibility/anchor-has-content': 'off',
        'vuejs-accessibility/click-events-have-key-events': 'off',
      },
    },
  ],
}
// .editorconfig
root = true

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

[*.md]
trim_trailing_whitespace = false
// Volar.config.js
const { volarPrettierPlugin } = require('@volar-plugins/prettier')
const prettierHtml = require('@volar-plugins/prettyhtml')

module.exports = {
  plugins: [
    prettierHtml({ semi: false, singleQuote: true, printWidth: 90 }),
    volarPrettierPlugin({
      languages: ['html', 'css', 'scss', 'typescript', 'javascript'],
      html: {
        breakContentsFromTags: false,
      },
      useVscodeIndentation: false,
    }),
  ],
}
johnsoncodehk commented 2 years ago

You can use https://github.com/johnsoncodehk/volar-plugins/tree/master/packages/prettier or https://github.com/johnsoncodehk/volar-plugins/tree/master/packages/prettyhtml.