Подтвердить что ты не робот

Украшать/заливать пробелы в JavaScript

Я хотел бы использовать (и, возможно, даже автоматически) украшать пробелы в JavaScript. Вопрос в том, есть ли какие-либо инструменты, которые могут это сделать.

Я знаю, что JSLint и JSHint, например, могут проверять отступы и конечные пробелы, и это прекрасно, но это не единственные типы пробелов, которые у вас могут быть.

Я бы также хотел проверить:

  • Существуют ли пустые строки до или после определенных конструкций?
  • Есть ли несколько пустых строк?
  • Являются ли отдельные пробелы между определенными вещами (это частично проверено JSLint/JSHint)?
  • ...

В принципе, я хотел бы иметь все, что может сделать современная среда IDE, например Visual Studio plus Resharper, но как инструмент командной строки, который может быть встроен в Grunt.

Единственное, что я нашел, которое делает что-то в этом направлении, esformatter, но, согласно его веб-сайту,

все еще находится на ранней стадии разработки и отсутствует поддержка многих важных функций.

Конечно, было бы здорово, если бы было что-то более зрелое.

Любые идеи?

4b9b3361

Ответ 1

Обновить через 6 месяцев и много поиска

Предлагаю вам посмотреть eslint. Он построен на идее подключаемых правил линтинга, и это то, что вы просили. Вы можете использовать grunt-plugin grunt-eslint, чтобы указать правила перебора и автоматизировать его. Он по-прежнему пре-альфа, но прогрессирует быстрее, чем esformatter. Он имеет четко определенную дорожную карту.


Оригинал

Нет простого ответа на вопрос, который вы задаете. Поэтому позвольте мне разбить его и ответить на него по частям. Вам нужны функции современной среды IDE, такие как Visual Studio плюс Resharper, в командной строке, которую вы можете встроить в Grunt. Широкая классификация функций, которые вы (возможно) хотите:

  • Compiler/Debugger
    • Проверяет наличие ошибок до/во время выполнения.
  • подозрительный код Lint/flag
    • Выполняет стандарты кодирования, помогает найти возможные недостатки.
  • Formatter/Beautifier
    • Сделать код читаемым

Все перечисленные выше следует учитывать при создании IDE. Поэтому найти форматирование столь же мощным в IDE для node сложно.

Debugger

Я знаю, что можно использовать отладчик eclipse для node. Проверьте ссылку

Lint/Formatter

Для grunt (на основе JSLint/JSHint):

esformatter является мощным, потому что он использует esprima для анализа и форматирования Javascript. Это форматирование, а не линт, поэтому вам, возможно, придется использовать код перед его использованием. Существуют и другие форматы, использующие esprima, на которые вы можете посмотреть:

codepainter JavaScript-декорирование с использованием ECMAscript

В свойствах поддерживаемых стилей у него есть некоторые функции, которые вы можете использовать:

  • Отступ: {character: '?', width:? }
  • LastEmptyLine: present, omitted
  • QuoteType: single, double
  • SpaceAfterControlStatements: present, omitted
  • SpaceAfterAnonymousFunctions: present, omitted
  • SpacesAroundOperators: present, omitted
  • TrailingWhitespaces: strip

esmangle ECMAScript code mangler/minifier

esmangle использует esprima как синтаксический анализатор и использует escodegen как генератор кода. См. demo.

Существует много пакетов, которые разрабатываются для ECMAscript, вы можете проверить их здесь

Ответ 2

"@Golo: То, что вы хотите, - это способность указывать, как пробелы возникают между всеми типами языковых конструкций, во всех контекстах (например, как if-then-else выложено внутри цикла do vs. внутри верхнего уровня функции)?

Голо: Это правильно:-) "

Тогда вам нужен доступ к структуре языка в каждой точке кода и точная информация о местоположении каждого элемента языка (начальная/конечная строка/столбец). Для литья вам нужен способ написать тесты против комбинаций этих вещей. Для ремонта вам нужен способ регенерации текста, который соответствует вашим ограничениям. Очевидно, вы хотите, чтобы все было легко настроить.

"Структура", которую вы хотите, - это то, что создается парсером в дереве синтаксиса. Контекст - это структура синтаксиса вокруг интересующей структуры. Вы не хотите абстрактное синтаксическое дерево, потому что это теряет конкретные маркеры, позиции которых вы хотите проверить/контролировать, чтобы вы хотели получить полное конкретное дерево синтаксического анализа.

Парсеры не заинтересованы в точном исходном положении, но лексер (необходимый для разрыва входных потоков в токены языка для подачи на синтаксический анализатор) может собирать эту точную информацию. Вы беспокоитесь о некоторых осложняющих проблемах: "что составляет корректировки столбцов и сколько их". Некоторые примеры: символы вкладок: вкладка на следующую границу с 8 символами? 4 символа? на заранее заданные столбцы вкладок? В linux "LF" продвигает номер строки и сбрасывает количество столбцов в 1. В Windows это "CR/LF" как пара. На других ОС, с которыми я столкнулся, это только "CR"; на действительно современных системах, символ новой строки Unicode должен это сделать. Итак, если на linux, как вы должны лечить CR? Как насчет нулевых символов, найденных в тексте? ^ Z? Другие управляющие символы (например, ^ L [formfeed])?

Учитывая исходный файл, точно проанализированный в CST с захваченными позициями источника, теперь вы хотите проверить, что структура выровнена так, как вы хотите. Во-первых, вам нужно указать структуру; сделать цикл? конструктор? декларация данных? Затем вам понадобятся предикаты в позиции столбца, чтобы дать вам точный контроль.

Практически все инструменты, которые предоставляют деревья синтаксиса, не предоставляют простой способ ссылаться на такие структуры. В значительной степени вы застряли в написании классического процедурного кода, подобного компилятору, который знает форму дерева синтаксиса и взбирается на него, ища интересующее вас дерево node, а затем оглядываясь, видите ли другие соответствующие узлы дерева. После того, как вы находитесь в этом режиме, вы можете узнать нужные деревья и затем написать более процедурный код для проверки условных обозначений.

Системы трансформации программ (PTS) часто предоставляют перезаписи типа "источник-источник", в которых вы можете напрямую писать шаблоны с использованием поверхностного синтаксиса языка. Это гораздо удобнее, чем лезть по дереву процедурно. Некоторые только пары паттернов источник-источник; некоторые предлагают возможность указывать только один шаблон. Система PT также должна иметь возможность проанализировать интересующий язык и позволить вам добавлять пользовательские проверки для вашей конкретной задачи.

В качестве примера наш DMS Software Reengineering Toolkit анализирует ECMAScript и предлагает такие спецификации исходного кода, а также возможность прикреплять пользовательские условия и действия. В качестве примера:

domain ECMAScript;

pattern ideal_if_statement_layout(e:expression,s:statement):statement =
     " if (\e)
          \s"  if diagnose_not_equal(column(s),parentheses_column(e));

выражает интерес к операторам "если тогда" (вы использовали бы другой шаблон для "if then else" ) и ограничение над пользовательскими функциями сравнения столбцов, которые проверяют положение элементов инструкции. Пользовательская функция "diagnose_not_equal" создавала бы жалобы на линт. Кавычки являются мета-кавычками; они являются частью языка сопоставления шаблонов, а не основного языка. e и s являются метапарабелями и соответствуют любому выражению и формулировке структуры языка соответственно. Поскольку они применяются к КНТ, они не могут не соответствовать намеченным целям. Пользовательская функция "столбец" просто берет начальную информацию столбца, связанную с самым левым поддеревом s; API-интерфейсы управления деревьями в DMS делают это практически тривиальным. "скобки" требуется, потому что шаблон указывает вам, где e; "(" находится в дереве node выше e, поэтому требуется небольшая навигация по дереву, чтобы найти "(" , а затем извлечь его самый правый столбец, также легко сделать с помощью DMS API дерева.

Вы можете создавать произвольно сложные шаблоны; вы также можете сделать условие в одном patter, в зависимости от соответствия другого. Таким образом, при небольшом количестве пользовательских функций извлечения столбцов вы можете написать множество проверок на линии.

То, что вам не поможет, - это проверка того, что ключевое слово "if" - это одно место слева от слова "(" ключевое слово "). Вы можете выразить в некоторой степени дополнительные пользовательские проверки, например" statement_keyword_column ", и т.д., но это начинает неудобно.

Вы можете заметить расположение шаблона; было бы неплохо использовать это как ограничения. DMS не дает прямого способа сделать это. Тем не менее, он отлично способен читать свои собственные описания шаблонов как деревья. Используя это, можно извлечь макет apparant шаблона и использовать его для проверки структуры. Это требует некоторой сложности в использовании DMS, но это вопрос пота, а не теория или недостающие механизмы.

Мне лично не нравится много рисовать на макете; Я бы предпочел, чтобы файл просто переформатировался. У DMS есть правила довольно печатной печати, которые преобразуют ваш CST, каков бы ни был его макет, в макет, управляемый его правилами красивой печати. На данный момент эти правила специфичны для узлов дерева и кодируются грамматикой, поэтому они несколько ограничены. Можно написать (в грамматике):

   stmt =  'if' expression stmt ';'
   <<PrettyPrinter>>:  { V(H('if,expression),I(stmt[1])) }

Это приведет к тому, что все операторы if-then будут восстановлены как:

    if expresssion
       stmt

[V означает "вертикальная коробка" из двух подбоксов; H означает "горизонтальный ящик", я означает "с отступом" ]

Тщательное использование таких правил красивой печати может сделать довольно приятную работу по переформатированию кода. Это не идеально, потому что вы не можете контролировать расположение нескольких операторов таким образом. Но это часть DMS и на самом деле довольно легко модифицировать.

Идеальное решение было бы использовать язык шаблонов и использовать макет внутри шаблона для управления красивой печатью. Это в наших планах, но, увы, еще не в DMS.

Я думаю, что другие PTS могут выражать шаблоны в некоторой степени, как указано выше, и большинство из них имеют какой-то способ указать, что-то вроде DMS. Итак, хорошая новость заключается в том, что эти инструменты делают многое из того, что вы хотите. Нехорошая новость заключается в том, что вы пытаетесь выбрать один из инструментов и научиться его использовать; день не сокращает, длинным выстрелом.

Ответ 3

В принципе, я хотел бы иметь все, что может сделать современная среда IDE, например Visual Studio plus Resharper, но как инструмент командной строки, который может быть встроен в Grunt.

Как насчет этого: https://npmjs.org/package/grunt-jsbeautifier

По существу https://npmjs.org/package/js-beautify, завернутый в задачу Grunt.

Изменить, чтобы расширить мой первоначальный ответ: я не знаком с возможностями VS Resharper, но, по крайней мере, по Readme, есть возможность сделать JSLint счастливым (и все мы знаем, насколько суетливый тот может быть).

Ответ 4

google closures lint имеет функцию фиксированного линта, которая удаляет ваш код для вас и получает его в соответствии с руководством по стилю google. https://developers.google.com/closure/utilities/docs/linter_howto

Ответ 5

Я использую Eclipse, так как я пишу java, javascript, perl (плагин EPIC), оболочку script и многое другое. Eclipse легко кодирует формат любого из этих языков и более, используя ярлык CTRL-SHIFT-F. Это хорошо сработало для меня в IDE.

Для командной строки вы можете использовать инструменты форматирования eclipse. См:

Все, что было сказано, может быть больше накладных расходов, чем вы ищете, если вы или люди в вашей команде уже не пользуетесь Eclipse. НО! Форматирование кода Eclipse очень настраивается и будет заботиться о некоторых проблемах с пробелами/пустым линией.