[英]vs code and intellisense for CSS Grid and CSS Modules
I am using VS code for a project using CSS Grid and CSS Modules.我在一个使用 CSS Grid 和 CSS Modules 的项目中使用 VS 代码。 However when I try something like this
但是,当我尝试这样的事情时
.loginRegisterDiv {
composes: loginDiv;
margin: 0px;
width: 100%;
}
I get an error saying composes "unknown property" for composes.我收到一条错误消息,提示为 composes 撰写“未知属性”。 Plus I am using css grid and there does not seem to be any intellisense for this in VS code.
另外,我正在使用 css grid,在 VS 代码中似乎没有任何智能感知。 Do I need to install an extension?
我需要安装扩展吗?
I am using rallycoding rulesets.我正在使用rallycoding 规则集。
You can add to the VSC CSS linter an exception to the rule css.lint.unknownProperties
(or set this to ignore).您可以向 VSC CSS
css.lint.unknownProperties
添加规则css.lint.unknownProperties
的例外(或将其设置为忽略)。 Open the VSC settings, search for css.lint.validProperties
and add 'composes' to the list.打开 VSC 设置,搜索
css.lint.validProperties
并将“ css.lint.validProperties
添加到列表中。 The error/warning will go away.错误/警告将消失。
To make the VS Code recognise these custom CSS directive/properties, you can provide custom data for VS Code's CSS Language Service as mentioned here - https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md .为了使 VS Code 识别这些自定义 CSS 指令/属性,您可以为此处提到的 VS Code 的 CSS 语言服务提供自定义数据 - https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/自定义数据.md 。
Create a CSS custom data set file with the following info.使用以下信息创建 CSS 自定义数据集文件。 Place it at location
.vscode/custom.css-data.json
relative to the project root.将其放置在相对于项目根目录的
.vscode/custom.css-data.json
位置。
{
"version": 1.1,
"properties": [
{
"name": "composes",
"description": "css modules compose"
}
],
"atDirectives": [
{
"name": "@value",
"description": "css modules value import"
}
],
"pseudoClasses": [],
"pseudoElements": []
}
Now, if you don't have already, create a .vscode\\settings.json
file relative to project root.现在,如果您还没有,请创建一个相对于项目根目录的
.vscode\\settings.json
文件。 Add a field with key "css.customData" and value as the path to custom data set.添加一个带有“css.customData”键和值的字段作为自定义数据集的路径。 For example,
例如,
{
"css.customData": ["./.vscode/custom.css-data.json"]
}
Now, you will no longer get "Unknown property" warning.现在,您将不再收到“未知财产”警告。 When you hover over "composes", you will see the description you set for it in
custom.css-data.json
当您将鼠标悬停在“撰写”上时,您将看到您在
custom.css-data.json
为其设置的描述
I use extensions to help with this particular problem.我使用扩展来帮助解决这个特定问题。 The extension system is excellent in VS Code, and there are a lot of really high quality extensions built by the community that greatly improve the quality and feature set of the editor.
VS Code 中的扩展系统非常优秀,社区构建了很多真正高质量的扩展,大大提高了编辑器的质量和功能集。
Here are a few extensions that I use for writing SASS in VS Code.以下是我用于在 VS Code 中编写 SASS 的一些扩展。 One or a couple of these should fix the problems you are having (and maybe even a few you didn't know you were having).
其中一个或几个应该可以解决您遇到的问题(甚至可能是您不知道遇到的一些问题)。
CSS Modules Syntax Highlighter by Andrew Leedham CSS Modules Syntax Highlighter by Andrew Leedham
SCSS IntelliSense by mrmlnc由 mrmlnc 提供的SCSS 智能感知
Install one or several of those in VS Code, restart the editor, and then let me know if that doesn't fix your issue.在 VS Code 中安装其中一个或多个,重新启动编辑器,然后让我知道这是否不能解决您的问题。
A similar issue has been raised to the vs code team and has not been addressed yet:类似的问题已经向 vs Code 团队提出,但尚未得到解决:
https://github.com/Microsoft/vscode/issues/13003 https://github.com/Microsoft/vscode/issues/13003
这对我"css.lint.validProperties": ["composes"],
,在您的settings.json
文件中添加"css.lint.validProperties": ["composes"],
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.