【问题标题】:Custom Google AMP tag and attributes in PhpStorm?PhpStorm 中的自定义 Google AMP 标记和属性?
【发布时间】:2017-05-09 06:15:39
【问题描述】:

PhpStorm 中是否支持 AMP 项目(由 Google 提供)的自定义标签和属性?

例如<amp-sidebar><style amp-custom>...

【问题讨论】:

  • 您到底在寻找什么?对于标签——您可以轻松地将它们添加到“已知”标签列表中,这样 IDE 就不会抱怨它们(Alt+Enter 提供了一些快速修复)。属性也应该存在类似的情况。
  • 如果可能的话希望自动完成和验证
  • 似乎目前最好的选择是使用“添加到自定义 html 属性”(通过 Alt+Enter),谢谢@LazyOne

标签: phpstorm amp-html


【解决方案1】:

使用终端和jqjson validator,我制作了一个有效amp 标签的提取器,以添加到PhpStorm 自定义标签中。

发电机

curl -s https://cdn.ampproject.org/v0/validator.json | jq --compact-output --raw-output '[.tags[].tagName] | unique | map(select(startswith("AMP-"))) | join(",") | ascii_downcase'

电流输出

amp-3d-gltf,amp-3q-player,amp-accordion,amp-action-macro,amp-ad,amp-ad-custom,amp-ad-exit,amp-addthis,amp-analytics,amp-anim,amp-animation,amp-apester-media,amp-app-banner,amp-audio,amp-auto-ads,amp-autocomplete,amp-base-carousel,amp-beopinion,amp-bind-macro,amp-bodymovin-animation,amp-brid-player,amp-brightcove,amp-byside-content,amp-call-tracking,amp-carousel,amp-connatix-player,amp-consent,amp-dailymotion,amp-date-countdown,amp-date-display,amp-date-picker,amp-delight-player,amp-embed,amp-embedly-card,amp-embedly-key,amp-experiment,amp-facebook,amp-facebook-comments,amp-facebook-like,amp-facebook-page,amp-fit-text,amp-font,amp-fx-flying-carpet,amp-geo,amp-gfycat,amp-gist,amp-google-assistant-assistjs-config,amp-google-assistant-inline-suggestion-bar,amp-google-assistant-voice-bar,amp-google-assistant-voice-button,amp-google-document-embed,amp-gwd-animation,amp-hulu,amp-iframe,amp-iframely,amp-ima-video,amp-image-lightbox,amp-image-slider,amp-img,amp-imgur,amp-inline-gallery,amp-inline-gallery-pagination,amp-inline-gallery-thumbnails,amp-instagram,amp-install-serviceworker,amp-izlesene,amp-jwplayer,amp-kaltura-player,amp-layout,amp-lightbox,amp-link-rewriter,amp-list,amp-list-load-more,amp-live-list,amp-mathml,amp-mega-menu,amp-megaphone,amp-minute-media-player,amp-mowplayer,amp-nested-menu,amp-next-page,amp-nexxtv-player,amp-o2-player,amp-onetap-google,amp-ooyala-player,amp-orientation-observer,amp-pan-zoom,amp-pinterest,amp-pixel,amp-playbuzz,amp-position-observer,amp-powr-player,amp-reach-player,amp-recaptcha-input,amp-redbull-player,amp-reddit,amp-render,amp-riddle-quiz,amp-script,amp-selector,amp-sidebar,amp-skimlinks,amp-smartlinks,amp-social-share,amp-soundcloud,amp-springboard-player,amp-state,amp-sticky-ad,amp-story,amp-story-360,amp-story-animation,amp-story-auto-ads,amp-story-auto-analytics,amp-story-bookend,amp-story-consent,amp-story-cta-layer,amp-story-grid-layer,amp-story-interactive-binary-poll,amp-story-interactive-poll,amp-story-interactive-quiz,amp-story-interactive-results,amp-story-page,amp-story-page-attachment,amp-story-page-outlink,amp-story-panning-media,amp-story-player,amp-story-social-share,amp-stream-gallery,amp-timeago,amp-truncate-text,amp-twitter,amp-user-notification,amp-video,amp-video-iframe,amp-vimeo,amp-vine,amp-viqeo-player,amp-vk,amp-web-push,amp-web-push-widget,amp-wistia-player,amp-yotpo,amp-youtube

PhpStorm 中的设置

打开检查 (File | Settings | Editor | Inspections > HTML > Invalid HTML tag) 然后添加上面的输出。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-06-04
    • 1970-01-01
    • 1970-01-01
    • 2015-05-14
    • 2014-09-19
    • 2012-05-22
    • 2017-09-14
    相关资源
    最近更新 更多