{"id":20580,"library":"stylelint-codeframe-formatter","title":"stylelint-codeframe-formatter","description":"A custom formatter for Stylelint that displays lint results with a babel-code-frame, showing the exact source code where errors/warnings occur, along with filenames and line:column references for clickable navigation. Current stable version 1.2.0 (released 2023-06). Maintained as a minor/major update cycle; last release fixes CSS syntax error display. Key differentiator: provides inline code context unlike Stylelint's built-in formatters, helping developers quickly locate issues. Requires Stylelint as a peer dependency.","status":"active","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/bencergazda/stylelint-codeframe-formatter","tags":["javascript","stylelint","formatter","codeframe"],"install":[{"cmd":"npm install stylelint-codeframe-formatter","lang":"bash","label":"npm"},{"cmd":"yarn add stylelint-codeframe-formatter","lang":"bash","label":"yarn"},{"cmd":"pnpm add stylelint-codeframe-formatter","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required to format lint results; the formatter receives data from Stylelint.","package":"stylelint","optional":false}],"imports":[{"note":"ESM default export; CommonJS users can use require('stylelint-codeframe-formatter') directly, but this is the ESM way.","wrong":"const { default: formatter } = require('stylelint-codeframe-formatter')","symbol":"default","correct":"import formatter from 'stylelint-codeframe-formatter'"},{"note":"CommonJS require returns the default export directly; do not access .default in CJS.","wrong":"const formatter = require('stylelint-codeframe-formatter').default","symbol":"formatter","correct":"const formatter = require('stylelint-codeframe-formatter')"},{"note":"TypeScript uses default import; namespace import may cause runtime issues.","wrong":"import * as formatter from 'stylelint-codeframe-formatter'","symbol":"formatter as default import in TypeScript","correct":"import formatter from 'stylelint-codeframe-formatter'"}],"quickstart":{"code":"// Install: npm install stylelint stylelint-codeframe-formatter --save-dev\n// Use with Stylelint CLI:\n// stylelint --custom-formatter node_modules/stylelint-codeframe-formatter/index.js \"src/**/*.css\"\n\n// Or programmatically (ESM):\nimport formatter from 'stylelint-codeframe-formatter';\nimport stylelint from 'stylelint';\n\nconst result = await stylelint.lint({\n  files: 'src/**/*.css',\n  formatter: formatter,\n});\nconsole.log(result.output);","lang":"typescript","description":"Demonstrates installing the formatter, using it via Stylelint CLI, and integrating programmatically with lint results."},"warnings":[{"fix":"Upgrade to >=1.2.0","message":"The formatter may show 'undefined' for rule name when the message duplicates the rule name (fixed in v1.2.0).","severity":"gotcha","affected_versions":"<1.2.0"},{"fix":"Upgrade to >=1.0.6","message":"v1.0.6 fixed an issue with empty stylelint results; earlier versions could crash.","severity":"breaking","affected_versions":"<1.0.6"},{"fix":"Upgrade to >=1.0.5","message":"The package uses babel-code-frame; babel-code-frame is deprecated in favor of @babel/code-frame (upgraded in v1.0.5).","severity":"deprecated","affected_versions":"<1.0.5"},{"fix":"Use require('stylelint-codeframe-formatter') in the plugin options","message":"When using with stylelint-webpack-plugin, ensure the formatter is required correctly: formatter: require('stylelint-codeframe-formatter') (not the path).","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install stylelint-codeframe-formatter --save-dev","cause":"Package not installed or not in node_modules.","error":"Error: Cannot find module 'stylelint-codeframe-formatter'"},{"fix":"Use: import formatter from 'stylelint-codeframe-formatter'","cause":"Using namespace import (import * as) instead of default import in ESM.","error":"The constructor must be a function that returns an object or the formatter expects to be a function"},{"fix":"Upgrade to >=1.0.6","cause":"Issue with empty result or malformed node (fixed in v1.0.6).","error":"stylelint-codeframe-formatter: Failed to display codeframe: Cannot read property 'type' of null"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}