PyCharm - 社区版是不是能够突出显示 css/javascript？

Posted 2023-03-28

【中文标题】PyCharm - 社区版是不是能够突出显示 css/javascript？

【英文标题】：Is PyCharm's community edition able to highlight CSS and JavaScript?PyCharm - 社区版是否能够突出显示 css/javascript？

【发布时间】：2014-01-26 00:38:00

【问题描述】：

我正在探索 PyCharm 的功能以决定是否应该使用它（现在是 PyDev）。一切看起来都很棒，但我还没有找到让 PyC​​harm 突出显示 css 或 js 文件的方法：

这是商业版才有的功能吗？

【问题讨论】：

针对所有编辑器和不受支持的文件类型的小解决方法：在类似的语言下注册它们。例如 C/C++ 类别适用于 *.js 文件 - 它会突出显示字符串、数字和一些关键字，使编辑更容易。

【参考方案1】：

仅专业版支持使用 javascript、CoffeeScript、TypeScript、html/CSS 进行 Web 开发。它们在 Community Edition 中被编辑为没有标记的文本文件。

PyCharm Editions Comparison

【讨论】：

找到这个jetbrains.com/pycharm/webhelp/…，说明应该支持CSS。

支持的文件类型意味着 PyCharm 可以理解该格式。据我了解，您对标记（着色、语法、建议）感兴趣。

uhmmm，我以为它们是一样的东西。好的，谢谢。

我会注意到，对于所有其他“支持”的格式，它似乎会进行着色等。社区版似乎不/实际上/支持CSS（它没有得到它自己的图标，如文档所示）。它必须以“文本”形式打开，因为所有不受支持的格式都必须如此。

嗯，有点令人失望。我真的很喜欢 Pycharm，但是对于 web 开发，我已经切换到 Visual Studio Code，因为没有原生 css 标记

【参考方案2】：

如果您使用此内容创建 css.xml，那么您将获得 css 突出显示和代码补全：

<?xml version="1.0" encoding="UTF-8"?>
<filetype binary="false" default_extension="" description="css" name="css">
  <highlighting>
    <options>
      <option name="LINE_COMMENT" value="" />
      <option name="COMMENT_START" value="/*" />
      <option name="COMMENT_END" value="*/" />
      <option name="HEX_PREFIX" value="" />
      <option name="NUM_POSTFIXES" value="" />
      <option name="HAS_BRACES" value="true" />
      <option name="HAS_PARENS" value="true" />
    </options>
    <keywords keywords="@font-face;@keyframes;@media;align-content;align-items;align-self;animation;animation-delay;animation-direction;animation-duration;animation-fill-mode;animation-iteration-count;animation-name;animation-play-state;animation-timing-function;backface-visibility;background;background-attachment;background-clip;background-color;background-image;background-origin;background-position;background-repeat;background-size;border;border-bottom;border-bottom-color;border-bottom-left-radius;border-bottom-right-radius;border-bottom-style;border-bottom-width;border-collapse;border-color;border-image;border-image-outset;border-image-repeat;border-image-slice;border-image-source;border-image-width;border-left;border-left-color;border-left-style;border-left-width;border-radius;border-right;border-right-color;border-right-style;border-right-width;border-spacing;border-style;border-top;border-top-color;border-top-left-radius;border-top-right-radius;border-top-style;border-top-width;border-width;bottom;box-shadow;box-sizing;caption-side;clear;clip;color;column-count;column-fill;column-gap;column-rule;column-rule-color;column-rule-style;column-rule-width;column-span;column-width;columns;content;counter-increment;counter-reset;cursor;direction;display;empty-cells;flex;flex-basis;flex-direction;flex-flow;flex-grow;flex-shrink;flex-wrap;float;font;font-family;font-size;font-size-adjust;font-stretch;font-style;font-variant;font-weight;hanging-punctuation;height;icon;justify-content;left;letter-spacing;line-height;list-style;list-style-image;list-style-position;list-style-type;margin;margin-bottom;margin-left;margin-right;margin-top;max-height;max-width;min-height;min-width;nav-down;nav-index;nav-left;nav-right;nav-up;opacity;order;outline;outline-color;outline-offset;outline-style;outline-width;overflow;overflow-x;overflow-y;padding;padding-bottom;padding-left;padding-right;padding-top;page-break-after;page-break-before;page-break-inside;perspective;perspective-origin;position;quotes;resize;right;tab-size;table-layout;text-align;text-align-last;text-decoration;text-decoration-color;text-decoration-line;text-decoration-style;text-indent;text-justify;text-overflow;text-shadow;text-transform;top;transform;transform-origin;transform-style;transition;transition-delay;transition-duration;transition-property;transition-timing-function;unicode-bidi;vertical-align;visibility;white-space;width;word-break;word-spacing;word-wrap;z-index" ignore_case="false" />
  </highlighting>
  <extensionMap>
    <mapping ext="css" />
  </extensionMap>
</filetype>

【讨论】：

我应该把它放在哪里？

Mac：~/Library/Preferences/

对于 PyCharm 2020 社区版，在 /Users/username/Library/Application Support/JetBrains/PyCharmCE2020.1/filetypes/ 创建文件 css.xml

Windows 怎么样？我应该把它放在哪里？

【参考方案3】：

您可以通过设置/编辑器/文件和代码模板创建新的语法定义。

或者在 C:\Users\%USERNAME%.PyCharm30\config\filetypes 中创建一个带有以下内容的 javascript.xml 文件：

<?xml version="1.0" encoding="UTF-8"?>
<filetype binary="false" default_extension="" description="Javascript" name="Javascript">
  <highlighting>
    <options>
      <option name="LINE_COMMENT" value="//" />
      <option name="COMMENT_START" value="/*" />
      <option name="COMMENT_END" value="*/" />
      <option name="HEX_PREFIX" value="" />
      <option name="NUM_POSTFIXES" value="" />
      <option name="HAS_BRACES" value="true" />
      <option name="HAS_BRACKETS" value="true" />
      <option name="HAS_PARENS" value="true" />
      <option name="HAS_STRING_ESCAPES" value="true" />
    </options>
    <keywords keywords="break;case;catch;class;const;continue;debugger;default;delete;do;else;export;extends;finally;for;function;if;import;in;instanceof;let;new;return;super;switch;this;throw;try;typeof;var;void;while;with;yield" ignore_case="false" />
  </highlighting>
  <extensionMap>
    <mapping ext="js" />
  </extensionMap>
</filetype>

【讨论】：

您能否更具体地说明您要做什么以及什么不起作用？

试图让语法高亮在 javascript 文件上工作但它不起作用？我把文件放到config文件夹中

我安装了 PyCharm Community Edition 2017.1，C:\Users\<username>\.PyCharmCE2017.1\config\ 文件夹中默认没有 filetypes 文件夹。所以我不得不在这里创建filetypes 文件夹，然后放入上面的xml。

在Mac上，将上述XML内容放入/Users/<username>/Library/Preferences/PyCharm30/filetypes/javascript.xml

【参考方案4】：

更简单的解决方案是转到Settings -> Editor -> File Types，并添加一个名为CSS 的新配置。删除与默认配置文件的*.css 的关联。将新配置文件与扩展名*.css关联，设置块cmets以/*和*/开始和结束，最后添加每个级别的突出显示关键字，如下所示。

关键字 1

a
body
button
div
font
font-face
form
frame
h1
h2
h3
h4
iframe
img
import
input
li
link
media
nav
ol
option
p
select
span
table
td
th
title
tr
u
ul
video

关键字 2

background
background-color
border
border-radius
bottom
box-shadow
color
content
cursor
display
float
font-family
font-size
font-weight
height
left
line-height
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
outline
overflow
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align
text-decoration
text-transform
top
vertical-align
white-space
width
z-index
zoom

关键字 3

em
pt
px
rgb
rgba

关键字 4

!important
active
after
before
hover
none
visited

【讨论】：

也许你有同样的 JavaScript 解决方案？

很遗憾我没有，但我认为这种基本映射不适用于 JavaScript，因为它很复杂。编辑：通过快速的谷歌搜索，看起来有人试图使用 dart 插件，将它的文件类型映射为 *.js 文件。我还没有测试它，所以我不知道它是否有效。

【参考方案5】：

安装Dart Plugin。并从 JavaScript 文件类型中删除 *.js，然后将 *.js 添加到 Dart 文件类型中。有效！

仅供参考：咖啡插件不起作用

【讨论】：

嗯，语法高亮中缺少一些基本关键字，例如 function 和 let，但代码完成确实有效。我猜总比没有好。

【参考方案6】：

转到此选项卡https://www.jetbrains.com/help/pycharm/symbols.html 并在下面添加 javascript 允许的文件类型 *.html 或您看不到 js 正确标记的任何其他文件类型