stylelint报Unexpected missing end-of-source newline错误的解决方法

问题场景 #

使用Stylelint检测SCSS文件时触发「Unexpected missing end-of-source newline」错误，相关文件及配置如下：

目标SCSS文件内容 #

@tailwind base;
@tailwind components;
@tailwind utilities;
/* end of import */ 

报错信息 #

src/components/tabs/tabs.scss
15:16   ⚠  Unexpected missing end-of-source newline (no-missing-end-of-source-newline) [stylelint]

[vite:css] Unexpected missing end-of-source newline (no-missing-end-of-source-newline)
13 |  }
14 |  
15 |  /* empty line */
   |                  ^

当前Stylelint配置 #

/* eslint-env node */

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recess-order',
    'stylelint-config-css-modules',
    'stylelint-config-prettier',
    // Uncomment out the below if you want to use scss
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-scss',
  ],
  plugins: ['stylelint-scss'],
  ignoreFiles: [
    './node_modules/**/*.css',
    './dist/**/*.css',
    './coverage/**/*.css',
  ],
  rules: {
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'tailwind',
          'apply',
          'screen',
          'variants',
          'responsive',
        ],
      },
    ],
    'no-duplicate-selectors': null,
    'no-empty-source': null,
    'rule-empty-line-before': null,
    'comment-empty-line-before': null,
    'selector-pseudo-element-no-unknown': null,
    'declaration-block-trailing-semicolon': null,
    'no-descending-specificity': null,
    'string-no-newline': null,
    // Limit the number of universal selectors in a selector,
    // to avoid very slow selectors
    'selector-max-universal': 1,
    'selector-class-pattern': null,
    // --------
    // SCSS rules
    // --------
    'scss/dollar-variable-colon-space-before': 'never',
    'scss/dollar-variable-colon-space-after': 'always',
    'scss/dollar-variable-no-missing-interpolation': true,
    'scss/dollar-variable-pattern': /^[a-z-]+$/,
    'scss/double-slash-comment-whitespace-inside': 'always',
    'scss/operator-no-newline-before': true,
    'scss/operator-no-unspaced': true,
    'scss/selector-no-redundant-nesting-selector': true,
    // Allow SCSS and CSS module keywords beginning with `@`
    'scss/at-rule-no-unknown': null,
  },
};

解决办法 #

方法1：手动添加文件末尾换行 #

打开报错的SCSS文件，将光标移到最后一行末尾，按回车键添加一个空行即可。

方法2：在Stylelint配置中禁用该规则 #

如果不需要强制要求文件末尾换行，可在配置的rules字段中添加：

'no-missing-end-of-source-newline': null

或直接设置为false：

'no-missing-end-of-source-newline': false

保存配置后重新检测，错误即可消除。

内容的提问来源于stack exchange，提问作者hasina rajik