SCSS support (or disabling for a given extension)

[hst-pierre]

Using the new v3 version, I cannot get SCSS file to be formatted with this plugin. Is there a way to either disable this plugin for some file extensions or to add support for it?

For reference, here is the config I am using:

module.exports = {
  importOrder: ['^[./]'],
  importOrderSeparation: true,
  importOrderCaseInsensitive: true,
  importOrderSortSpecifiers: true,
  importOrderParserPlugins: ['jsx', 'typescript'],
  overrides: [
    {
      files: '*.scss',
      parser: 'scss',
      options: {
        importOrderParserPlugins: ['scss'],
      },
    },
  ],
};

If my scss file has an @import at the beginning, the following error is thrown: This experimental syntax requires enabling one of the following parser plugin(s): 'decorators-legacy, decorators' (1:0). I have tried several ways, including removing the importOrderParserPlugins entirely, use the parser: 'typescript' as the root option, removing the parser 'scss' in the overrides. I also tried adding the decorator-legacy or 'decorators' but these two only gives an error that @import is an invalid syntax.

One idea to disable would be to have importOrder support a boolean value: false would disable the plugin and true would enable and only use the natural sort order.

[AmazingTurtle]

I have the same issue, not for scss files but for typescript files when actually using decorators. I'm running a monorepo setup. The linter works fine in my frontend configuration, however it does not run well with @nestjs.

.eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

.prettierrc

{
  "singleQuote": true,
  "trailingComma": "all"
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false
  }
}

Note, that prettier autoloads all packages in node_modules with prettier-plugin. In my case, the plugin is autoloaded by prettier, it's not explicitly configured in my .prettierrc. Autoloading the plugin is sufficient to lead to this issue even though the plugin is not specified in my configuration.

But I found a solution

In my case it helped to add the following line to .prettierrc:

"importOrderParserPlugins" : ["typescript", "[\"decorators-legacy\", {\"decoratorsBeforeExport\": true}]"],

My .prettierrc looks like this now

{
  "singleQuote": true,
  "trailingComma": "all",
  "importOrder": ["^@nestjs/(.*)$", "^@dms/(.*)$", "^[./]"],
  "importOrderParserPlugins" : ["typescript", "[\"decorators-legacy\", {\"decoratorsBeforeExport\": true}]"],
  "plugins": ["@trivago/prettier-plugin-sort-imports"]
}