Сохранить вертикальные пробелы в Vue шаблон с красивее -- vue.js поле с участием eslint поле с участием prettier пол Связанный проблема

Preserve vertical whitespace in Vue template with Prettier


11
vote

проблема

русский

Я использую eslint-plugin-vue с моим Vuue Project.

У меня есть следующий <код> .prettierrc файл:

 <Код> // /.prettierrc {   "arrowParens": "avoid",   "bracketSpacing": true,   "insertPragma": false,   "jsxBracketSameLine": false,   "printWidth": 80,   "proseWrap": "preserve",   "requirePragma": false,   "semi": false,   "singleQuote": true,   "tabWidth": 2,   "trailingComma": "es5",   "useTabs": false }   

и следующий <код> .eslintrc.js Файл:

 <Код> module.exports = {   root: true,   env: {     node: true,   },   extends: [     'plugin:vue/recommended',     '@vue/prettier',   ],   rules: {     'linebreak-style': ['error', 'unix'],     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',     'vue/max-attributes-per-line': 'off',     'vue/html-self-closing': [       'error',       {         html: {           void: 'always',           normal: 'always',           component: 'always',         },         svg: 'always',         math: 'always',       },     ],   },   plugins: ['vue'],   parserOptions: {     parser: 'babel-eslint',   }, }   

Но, к сожалению, красивее думает, что

 <Код> <template>   <header><a href="/" class="logo"> Home </a></header> </template>   

красивее, чем

 <Код> <template>   <header>     <a href="/" class="logo">       Home     </a>   </header> </template>   

красивее, будучи раздражающим


Как я могу сказать красивее, чтобы сохранить мой вертикальный пробел в шаблоне Vue?

Есть ли правила, похожие на то, что я хочу?

Английский оригинал

I'm using the eslint-plugin-vue with my Vue project.

I have the following .prettierrc file:

// /.prettierrc {   "arrowParens": "avoid",   "bracketSpacing": true,   "insertPragma": false,   "jsxBracketSameLine": false,   "printWidth": 80,   "proseWrap": "preserve",   "requirePragma": false,   "semi": false,   "singleQuote": true,   "tabWidth": 2,   "trailingComma": "es5",   "useTabs": false } 

And the following .eslintrc.js file:

module.exports = {   root: true,   env: {     node: true,   },   extends: [     'plugin:vue/recommended',     '@vue/prettier',   ],   rules: {     'linebreak-style': ['error', 'unix'],     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',     'vue/max-attributes-per-line': 'off',     'vue/html-self-closing': [       'error',       {         html: {           void: 'always',           normal: 'always',           component: 'always',         },         svg: 'always',         math: 'always',       },     ],   },   plugins: ['vue'],   parserOptions: {     parser: 'babel-eslint',   }, } 

But unfortunately, prettier thinks that

<template>   <header><a href="/" class="logo"> Home </a></header> </template> 

Is prettier than

<template>   <header>     <a href="/" class="logo">       Home     </a>   </header> </template> 

Prettier being annoying


How can I tell prettier to preserve my vertical whitespace in the Vue template?

Are there any rules similar to what I want?

</div
        

Список ответов

1
 
vote

Ваш единственный вариант (обходной путь) использует игнорирование.

ex js файлы. <Код> // prettier-ignore
Ex html файлы. <Код> <!-- prettier-ignore -->

https://prettier.io/docs/en/ignore.html

 

Your only option(workaround) is using ignore.

Ex Js files. // prettier-ignore
Ex Html files. <!-- prettier-ignore -->

https://prettier.io/docs/en/ignore.html

</div
 
 
0
 
vote

Вот список правил для Vue в Eslint: https: // vuejs. github.io/eslint-plugin-vue/rules/ . Но если вы отключите правило, он будет применен ко всем вашим кодам, то.

Кроме того, кажется, что вы можете сказать красивее игнорировать блок: https: / /prettier.io/docs/en/ignore.html#html

Кроме того, я бы утвердовал, что это более «читаемо», но это моя точка зрения :)

 <Код> <template>   <header>     <a href="/" class="logo">Home</a>   </header> </template>   
 

Here's the list of rules for vue in eslint: https://vuejs.github.io/eslint-plugin-vue/rules/ But if you disable a rule it will be applied to all your code then.

Also, it seems that you can tell Prettier to ignore a block: https://prettier.io/docs/en/ignore.html#html

Besides, I would argue that this is more 'readable', but that's my point of view :)

<template>   <header>     <a href="/" class="logo">Home</a>   </header> </template> 
</div
 
 

Связанный проблема

1  вя-часы-подборщик не работает должным образом в течение цикла в VUE JS  ( Vue clock picker doesnt work properly in for loop in vue js ) 
<Р> Я пытаюсь использовать VUE-часы-подборщик для выбора времени. Вот то, что я сделал - <код> { "name": "Name", "code" "Code", "_embedded" : { ...

0  Локальные / литералы, содержащие HTML  ( Locales literals containing html ) 
в <Код> locale/lang.json У меня есть <код> { "title": "Title", "image": "service-corporate_thumb-v2.jpg", "alt": "alt", "imageFooter": "Some capt...

3  Адаптер загрузки CKeditor отправляет [Обещание объекта] на сервер  ( Ckeditor upload adapter sends object promise to server ) 
Я пытался реализовать Ckeditor5 в проект Vuejs, а после получения всей рабочей инфраструктуры я не могу получить фактический файл для загрузки на сервер PHP. ...

2  Как запустить созданный веб-сайт NUXT из файловой системы?  ( How to run a nuxt generated website from filesystem ) 
Когда я запускаю веб-сайт NUXT сгенерированного Vue из файловой системы, без сервера, я получаю <код> GET file:///_nuxt/... с состоянием <код> (failed) Ка...

0  Laravel Vue Axios не возвращает ответы  ( Laravel vue axios not returning response data ) 
Это мой первый раз, используя Laravel Vue и Axios. Я пытаюсь добавить кнопку Подписаться на канал пользователя. Это не возвращает абонентские ответы в Axios?....

0  Смотреть реквиты от детского компонента Vue.js  ( Watch props from children component vue js ) 
У меня есть два компонента «Number-IPut» и «вход корзины». Как я могу смотреть опоры из номера ввода (значение) в корзине? номер входного компонента: <код...

1  Держите токен обновлен на действии Axios  ( Keep token updated on axios action ) 
Я хочу использовать API Express REST, который требует действительного веб-маршрута JSON для некоторых маршрутов. Из-за того, что я должен передать токен от Lo...

1  Vue.js добавить класс для исчезновения с v-если  ( Vue js add class for fade in with v if ) 
У меня есть настройка системы вкладки с vue.js и работает хорошо. Моя единственная проблема заключается в том, что добавление классов для исчезновения в непро...

0  V-Carousel отзывчивается, но не изображения, которые он содержит  ( V carousel is responsive but not the images it contains ) 
Когда я использую V-Carousel , все работает нормально, кроме я заметил на мобильном Если сама карусель отзывчивается, изображения внутри нее нет, поэтому ото...

1  Визуализация списка элементов в компоненте, прилагаемой маршрутизатором  ( Render list of items in a component attached by router ) 
Я хотел бы перечислить элементы и отобразить детали, когда щелкнулся элемент. Сценарий выглядит как ниже: <код> const items = [ { id: 1, }, { ...

0  Код JavaScript в модальном загрузке не работает  ( Javascript code in modal of bootstrap not run ) 
код JavaScript в модальном загрузке не запускается: в CoCOle, ошибка такова: Если код не помещен в модуль, нет ошибок, как выше скриншот. код: (код не ...

2  Скачать массив изображений на кнопку  ( Download array of images on click of a button ) 
У меня есть очень базовый HTML-блок, который имеет <код> button для загрузки: <код> <div id="getImageWrapper"> <div class="image"> <p class="im...

3  Динамически добавлять строки, чтобы сформировать использование Vue.js  ( Dynamically add rows to form using vue js ) 
Я пытаюсь сделать динамическую форму, используя Vue. Пользователь нажимает кнопку «Добавить», и для них появляется другой ряд, чтобы добавить данные. Проблема...

2  Как сосредоточиться на V-Textarea, программически в Vuetify и Teadycript?  ( How to focus v textarea programatically in vuetify and typescript ) 
кажется невозможным сейчас, я пробовал сумасшедшие вещи, как: <код> (this.refs.vtextarea as any).textarea.focus() ((this.refs.vtextarea as Vue).$el as HTML...

0  Вложенный объект Bootstrap-Vue в массиве, чтобы показать в таблице  ( Bootstrap vue nested object in array to show in table ) 
Я пытаюсь распечатать таблицу лиги, но team часть находится в вложенном объекте. Как я могу подключиться к этому объекту, затем сделать их в таблицевых ячее...

Связанный проблема

1  вя-часы-подборщик не работает должным образом в течение цикла в VUE JS 
0  Локальные / литералы, содержащие HTML 
3  Адаптер загрузки CKeditor отправляет [Обещание объекта] на сервер 
2  Как запустить созданный веб-сайт NUXT из файловой системы? 
0  Laravel Vue Axios не возвращает ответы 
0  Смотреть реквиты от детского компонента Vue.js 
1  Держите токен обновлен на действии Axios 
1  Vue.js добавить класс для исчезновения с v-если 
0  V-Carousel отзывчивается, но не изображения, которые он содержит 
1  Визуализация списка элементов в компоненте, прилагаемой маршрутизатором 
0  Код JavaScript в модальном загрузке не работает 
2  Скачать массив изображений на кнопку 
3  Динамически добавлять строки, чтобы сформировать использование Vue.js 
2  Как сосредоточиться на V-Textarea, программически в Vuetify и Teadycript? 
0  Вложенный объект Bootstrap-Vue в массиве, чтобы показать в таблице