Syncing stylelint and editorconfig

... Syncing stylelint and editorconfig.md

Synchronizing .editorconfig and stylelint

Note: See MatanelGordon's comment for an updated approach to do this.

Just a quick how-to to import rules specified in .editorconfig into your stylelint configuration to avoid duplication.

Install the following packages. stylelint-config-standard is just used as an example. Use a different one or your current configuration object.

#> (npm install -g | yarn global add) editorconfig stylelint stylelint-config-standard 

Now, see .stylelintrc.js below. The .js ending is important.

You will have to extend the map of rules if you need more than the three I'm using. To get a list of rules:

> node -e "console.log(require('stylelint'))"

{ [Function: creator]
  process: [Function],
  utils: 
   { report: [Function],
     ruleMessages: [Function],
     validateOptions: [Function] },
  lint: [Function],
  rules: 
   { 'at-rule-blacklist': { [Function: rule] primaryOptionArray: true },
     'at-rule-empty-line-before': [Function],
     'at-rule-name-case': [Function],
     'at-rule-name-newline-after': [Function],
     [...]

.editorconfig

# You don't have to change anything in .editorconfig. This just happens to be mine.

root = true
[*]
indent_style = space
indent_size = 3 # yes, so sue me!
trim_trailing_whitespace = true
end_of_line = lf
insert_final_newline = true

.stylelintrc.js

# had a bit of trouble with the paths, probably b/c some confusion between yarn and npm
'use strict';
const editorconfig = require('editorconfig').parseSync('./editorconfig')
const stylelintConfigStandard = require('/Users/matthi/.yarn-config/global/node_modules/stylelint-config-standard')

module.exports =  Object.assign(stylelintConfigStandard, 
   { rules: 
      {
         'no-missing-end-of-source-newline': editorconfig.insert_final_newline, 
         'indentation': editorconfig.indent_size,
         'no-eol-whitespace': editorconfig.trim_trailing_whitespace
      }
   }
)

Here's a more modern approach:

Instead of using parseSync, turn the whole file into a module and use top-level await with parse.

// .stylelintrc.mjs:
import { parse } from 'editorconfig';

const editorConfig = await parse('./.editorconfig');

export default {
	extends: ['stylelint-config-standard-scss', 'stylelint-config-recommended'],
	rules: {
		'selector-class-pattern': /^([a-z][a-z0-9]*)(-[a-z0-9]+)*$/,
		indentation: editorConfig.indent_size,
	},
};

Also, at this time I must point out that indentation is deprecated in stylelint v15 so other tools like prettier will take it from here.

*top-level await is unflagged since node v14.8.

Now I feel bad about using deprecated properties...7 years ago.

But, yes, this needs modernization and visitors are advised to follow your example!