Merge pull request #3698 from alphagov/eslint-markdown

Enable ESLint + Stylelint for code inside Markdown

.eslintrc.js

@@ -7,7 +7,10 @@ module.exports = {
     // Enable dotfile linting
     '!.*',
     'node_modules',
-    'node_modules/.*'
+    'node_modules/.*',
+
+    // Prevent CHANGELOG history changes
+    'CHANGELOG.md'
   ],
   overrides: [
     {
@@ -18,7 +21,13 @@ module.exports = {
         'plugin:n/recommended',
         'plugin:promise/recommended'
       ],
-      files: ['**/*.{cjs,js,mjs}'],
+      files: [
+        '**/*.{cjs,js,mjs}',
+
+        // Check markdown `*.md` contains valid code blocks
+        // https://github.com/eslint/eslint-plugin-markdown#advanced-configuration
+        '**/*.md/*.{cjs,js,mjs}'
+      ],
       parserOptions: {
         ecmaVersion: 'latest'
       },
@@ -98,6 +107,31 @@ module.exports = {
       env: {
         jest: true
       }
+    },
+    {
+      // Add plugin for markdown `*.md` code blocks
+      extends: ['plugin:markdown/recommended'],
+      files: ['**/*.md'],
+      plugins: ['markdown'],
+      processor: 'markdown/markdown'
+    },
+    {
+      files: ['**/coding-standards/js.md/*.{cjs,js,mjs}'],
+      env: {
+        browser: true
+      },
+      rules: {
+        // Ignore unused example code
+        'no-undef': 'off',
+        'no-unused-vars': 'off',
+
+        // Ignore paths to example modules
+        'import/no-unresolved': 'off',
+        'n/no-missing-import': 'off',
+
+        // Allow `var` in example code
+        'no-var': 'off'
+      }
     }
   ],
   parserOptions: {

.lintstagedrc.js

@@ -1,6 +1,6 @@
 const { ESLint } = require('eslint')
 
-module.exports = {
+const commands = {
   // ESLint's configuration makes it ignore built files in `dist` or `packages/govuk-frontend/dist`
   // that we want left alone, as well as the polyfills.
   // The glob used by lint-staged to trigger the linting on commit isn't aware
@@ -11,9 +11,16 @@ module.exports = {
   // as recommended by lint-staged.
   //
   // https://github.com/okonet/lint-staged#how-can-i-ignore-files-from-eslintignore
-  '*.{cjs,js,mjs}': filterTask('npm run lint:js:cli -- --fix'),
-  '*.{json,md,yaml,yml}': 'npm run lint:prettier:cli -- --write',
-  '*.scss': 'npm run lint:scss:cli -- --fix --allow-empty-input'
+  eslint: filterTask('npm run lint:js:cli -- --fix'),
+  prettier: 'npm run lint:prettier:cli -- --write',
+  stylelint: 'npm run lint:scss:cli -- --fix --allow-empty-input'
+}
+
+module.exports = {
+  '*.{cjs,js,mjs}': commands.eslint,
+  '*.{json,yaml,yml}': commands.prettier,
+  '*.md': [commands.eslint, commands.stylelint, commands.prettier],
+  '*.scss': commands.stylelint
 }
 
 // Configure paths to ignore

CHANGELOG.md

@@ -57,7 +57,7 @@ const Button = require('govuk-frontend/dist/govuk/components/button/button')
 
 For example using `import`:
 
-```js
+```mjs
 import Button from 'govuk-frontend/dist/govuk-esm/components/button/button.mjs'
 ```