feat: add stylelint module (#278)

nuxt · Nov 18, 2019 · 18740f8 · 18740f8
1 parent 9d5654a
commit 18740f8
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -64,6 +64,7 @@ yarn create nuxt-app <my-project>
     - [ESLint](https://github.com/nuxt/eslint-config)
     - [Prettier](https://github.com/prettier/prettier)
     - [Lint staged files](https://github.com/okonet/lint-staged)
+    - [StyleLint](https://github.com/stylelint/stylelint)
 1. Check the features needed for your project:
     - [PWA](https://pwa.nuxtjs.org/)
     - Linter / Formatter

diff --git a/prompts.js b/prompts.js
@@ -85,7 +85,8 @@ module.exports = [
     choices: [
       { name: 'ESLint', value: 'eslint' },
       { name: 'Prettier', value: 'prettier' },
-      { name: 'Lint staged files', value: 'lintStaged' }
+      { name: 'Lint staged files', value: 'lintStaged' },
+      { name: 'StyleLint', value: 'stylelint' }
     ],
     default: []
   },

diff --git a/saofile.js b/saofile.js
@@ -12,6 +12,7 @@ module.exports = {
     const eslint = this.answers.linter.includes('eslint')
     const prettier = this.answers.linter.includes('prettier')
     const lintStaged = eslint && this.answers.linter.includes('lintStaged')
+    const stylelint = this.answers.linter.includes('stylelint')
     const axios = this.answers.features.includes('axios')
     const dotenv = this.answers.features.includes('dotenv')
     const esm = this.answers.server === 'none'
@@ -25,6 +26,7 @@ module.exports = {
       eslint,
       prettier,
       lintStaged,
+      stylelint,
       axios,
       esm,
       edge,
@@ -97,7 +99,8 @@ module.exports = {
         '_.eslintrc.js': 'linter.includes("eslint")',
         '.prettierrc': 'linter.includes("prettier")',
         'jsconfig.json': 'devTools.includes("jsconfig.json")',
-        '.env': 'features.includes("dotenv")'
+        '.env': 'features.includes("dotenv")',
+        '_stylelint.config.js': 'linter.includes("stylelint")'
       }
     })
 
@@ -106,7 +109,8 @@ module.exports = {
       patterns: {
         gitignore: '.gitignore',
         '_package.json': 'package.json',
-        '_.eslintrc.js': '.eslintrc.js'
+        '_.eslintrc.js': '.eslintrc.js',
+        '_stylelint.config.js': 'stylelint.config.js'
       }
     })
 

diff --git a/template/_package.json b/template/_package.json
@@ -141,6 +141,10 @@
     "husky": "^2.6.0",
     "lint-staged": "^8.2.1",
     <%_ } _%>
+    <%_ if (stylelint) { _%>
+    "@nuxtjs/stylelint-module": "^3.1.0",
+    "stylelint": "^10.1.0",
+    <%_ } _%>
     <%_ if (test !== 'none') { _%>
     "@vue/test-utils": "^1.0.0-beta.27",
     <%_ } _%>

diff --git a/template/_stylelint.config.js b/template/_stylelint.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  // add your custom config here
+  // https://stylelint.io/user-guide/configuration
+}
diff --git a/template/nuxt/nuxt.config.js b/template/nuxt/nuxt.config.js
@@ -87,6 +87,10 @@ module.exports = {
     // Doc: https://github.com/nuxt-community/eslint-module
     '@nuxtjs/eslint-module',
     <%_ } _%>
+    <%_ if (stylelint) { _%>
+    // Doc: https://github.com/nuxt-community/stylelint-module
+    '@nuxtjs/stylelint-module',
+    <%_ } _%>
     <%_ if (ui === 'tailwind') { _%>
     // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
     '@nuxtjs/tailwindcss',

diff --git a/test/snapshots/index.test.js.md b/test/snapshots/index.test.js.md
@@ -804,6 +804,108 @@ Generated by [AVA](https://ava.li).
     }␊
     `
 
+## verify linter: StyleLint
+
+> Generated files
+
+    [
+      '.editorconfig',
+      '.gitignore',
+      'README.md',
+      'assets/README.md',
+      'components/Logo.vue',
+      'components/README.md',
+      'layouts/README.md',
+      'layouts/default.vue',
+      'middleware/README.md',
+      'nuxt.config.js',
+      'package.json',
+      'pages/README.md',
+      'pages/index.vue',
+      'plugins/README.md',
+      'static/README.md',
+      'static/favicon.ico',
+      'store/README.md',
+      'stylelint.config.js',
+    ]
+
+> package.json
+
+    {
+      dependencies: {
+        nuxt: '^2.0.0',
+      },
+      devDependencies: {
+        '@nuxtjs/stylelint-module': '^3.1.0',
+        stylelint: '^10.1.0',
+      },
+      private: true,
+      scripts: {
+        build: 'nuxt build',
+        dev: 'nuxt',
+        generate: 'nuxt generate',
+        start: 'nuxt start',
+      },
+    }
+
+> Generated nuxt.config.js
+
+    `␊
+    export default {␊
+      mode: 'universal',␊
+      /*␊
+      ** Headers of the page␊
+      */␊
+      head: {␊
+        title: process.env.npm_package_name || '',␊
+        meta: [␊
+          { charset: 'utf-8' },␊
+          { name: 'viewport', content: 'width=device-width, initial-scale=1' },␊
+          { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }␊
+        ],␊
+        link: [␊
+          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }␊
+        ]␊
+      },␊
+      /*␊
+      ** Customize the progress-bar color␊
+      */␊
+      loading: { color: '#fff' },␊
+      /*␊
+      ** Global CSS␊
+      */␊
+      css: [␊
+      ],␊
+      /*␊
+      ** Plugins to load before mounting the App␊
+      */␊
+      plugins: [␊
+      ],␊
+      /*␊
+      ** Nuxt.js dev-modules␊
+      */␊
+      buildModules: [␊
+        // Doc: https://github.com/nuxt-community/stylelint-module␊
+        '@nuxtjs/stylelint-module',␊
+      ],␊
+      /*␊
+      ** Nuxt.js modules␊
+      */␊
+      modules: [␊
+      ],␊
+      /*␊
+      ** Build configuration␊
+      */␊
+      build: {␊
+        /*␊
+        ** You can extend webpack config here␊
+        */␊
+        extend (config, ctx) {␊
+        }␊
+      }␊
+    }␊
+    `
+
 ## verify mode: Single Page App
 
 > Generated files

diff --git a/test/snapshots/index.test.js.snap b/test/snapshots/index.test.js.snap