在代码审查中为什么我使用 CSS 的单行注释会被 ESLint 报错?
国内众所周知的 ESLint 是一款广泛用于前端代码审查的 JavaScript 工具。它的出现在某种程度上协助前端编码中脱离了大量不规范的代码。ESLint 除了对 JavaScript 语法的正确性作出判断之外,还可以识别一些常见错误的编码风格。
在我们编写 CSS 时常常会在样式块后面添加注释,以便于更好地阅读代码。而在添加注释时,使用单行注释 "//" 也是一种常见的习惯。但在使用了 ESLint 工具之后,使用单行注释却会被它识别成错误,导致无法通过代码审查。这是为什么呢?
其实原因并不复杂,这是一个规则问题。ESLint 可以通过 parserOptions 属性来配置代码解析器会解析哪些注释。默认情况下 ESLint 是基于 JavaScript 规则开启的,因此它默认只支持 JavaScript 规则。而对于 CSS 规则则需通过配置文件单独配置,如下所示:
parserOptions: { sourceType: 'module', ecmaFeatures: { jsx: true }, parser: '@typescript-eslint/parser' },
那么如何让 ESLint 识别 CSS 的单行注释呢?只需在配置文件中添加如下规则即可:
{ "parserOptions": { "css": true } }
这条规则告诉 ESLint 启用 CSS 解析器,完美解决了单行注释被报错的问题。在这里提示一点,在启用 CSS 解析器时需要确保安装了解析器插件。
通过以上方式配置之后,我们可以在 CSS 样式中使用单行注释了,如下示例:
/* 定义一个标题 */ h1 { font-size: 18px; // 标题字体大小 }
总结:
通过以上分析得出,在使用了 ESLint 工具之后,在 CSS 样式中使用单行注释会被报错。这是因为需要在配置文件中开启 CSS 的解析器规则才能正常使用单行注释。当使用单行注释对代码进行说明时,不要忘记使用 ESLint 的相关规则,这也是提高代码质量与效率的一种方式。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64e0b262f6b2d6eab3be9391