Atom编辑器提示CSS属性grid-template-columns未知无法编译求助

问题原因 #

你遇到的Unknown property 'grid-template-columns'报错属于Atom编辑器配套CSS语法检查插件的误报：你使用的CSS Grid相关属性是W3C正式发布的标准特性，代码本身没有语法问题。在线编辑器可以正常运行、Atom本地报错的核心原因是Atom已经停止官方维护，默认配套的CSS检查插件（大多为早已停止更新的linter-csslint）没有跟进新CSS标准的属性库，才会把合法的Grid属性识别为未知属性。

可用解决方案 #

• 更换语法检查插件：卸载老旧的linter-csslint，安装对现代CSS特性支持更完善的linter-stylelint插件，安装完成后重启Atom即可识别CSS Grid相关属性。
• 配置现有插件忽略该类报错：如果不想更换插件，可以针对当前检查工具添加忽略规则：
  • 若使用csslint：在CSS文件顶部添加注释 /* csslint ignore:unknown-property */ 即可临时忽略未知属性报错
  • 若使用stylelint：在项目根目录的stylelint配置文件中添加如下规则：

    "property-no-unknown": [true, { 
      "ignoreProperties": ["grid-template-columns", "grid-template-rows", "grid-gap"] 
    }]
    

• 更换编辑器：由于Atom已经在2022年正式停止官方维护，对新的前端技术特性支持会越来越滞后，有条件可以更换为仍在活跃维护的代码编辑器，原生支持CSS Grid等所有现代前端特性的语法检查。

参考代码（确认无语法错误） #

HTML代码

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

CSS代码

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

报错截图

#

内容的提问来源于stack exchange，提问作者Rohan Shah