feat(stylelint): 新增stylelint功能

.eslintrc.js

@@ -6,7 +6,6 @@ module.exports = {
   },
   extends: [
     'plugin:vue/essential',
-    'eslint:recommended',
     'standard'
   ],
   rules: {

.stylelintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: 'stylelint-config-standard'
+}

.vscode/settings.json

@@ -5,15 +5,15 @@
    * @param formatOnSave 保存时自动修复
    */
   "editor.tabSize": 2,
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": false,
   /*
    * @description eslint 配置
    * @param alwaysShowStatus 配置
    * @param autoFixOnSave 保存时自动修复
    * @param validate 在vue中添加错误提示
    */
   "eslint.alwaysShowStatus": true,
-  "eslint.autoFixOnSave": true,
+  "eslint.autoFixOnSave": false,
   "eslint.validate": [
     "javascript",
     "javascriptreact",
@@ -33,7 +33,7 @@
    * @description stylelint 配置
    * @param autoFixOnSave 保存时自动修复
    */
-  "stylelint.autoFixOnSave": true,
+  "stylelint.autoFixOnSave": false,
   /*
    * @description vetur 配置
    */

CHANGELOG.md

@@ -35,6 +35,7 @@
 ### 🐛 Bug 修复
 范围|描述|commitId
 --|--|--
+ 更新了 commitlint 功能 | commitlint 更新到 1.0.10 版本 | [57155ce](https://github.com/luoxue-victor/learn_webpack/commit/57155ce)
  build | 修复了build是 publicPath 的问题 | [ac2ab19](https://github.com/luoxue-victor/learn_webpack/commit/ac2ab19)
  build/base | 获取文件名使用path.basename | [5efdc7d](https://github.com/luoxue-victor/learn_webpack/commit/5efdc7d)
  changelog | fix some changelog | [3bc624a](https://github.com/luoxue-victor/learn_webpack/commit/3bc624a)

api/PluginAPI.js

@@ -23,7 +23,6 @@ exports.genCacheConfig = function (id, partialIdentifier, configFiles = []) {
       // fmtFunc(this.service.projectOptions.configureWebpack)
     ]
   }
-  console.log(configFiles)
 
   if (!Array.isArray(configFiles)) {
     configFiles = [configFiles]
@@ -41,7 +40,6 @@ exports.genCacheConfig = function (id, partialIdentifier, configFiles = []) {
     }
 
     if (absolutePath.endsWith('.js')) {
-      // should evaluate config scripts to reflect environment variable changes
       try {
         return JSON.stringify(require(absolutePath))
       } catch (e) {

build/base.js

@@ -3,7 +3,7 @@ const Config = require('webpack-chain')
 const config = new Config()
 const files = findSync('../config')
 const path = require('path')
-const PluginAPI = require('../cli/PluginAPI')
+const PluginAPI = require('../api/PluginAPI')
 const resolve = (p) => {
   return path.join(process.cwd(), p)
 }

config/FriendlyErrorsWebpackPlugin.js

@@ -1,8 +1,10 @@
-const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
-
 module.exports = ({ config }) => {
+  const { transformer, formatter } = require('../util/resolveLoaderError')
   return () => {
-    config.plugin('error')
-      .use(FriendlyErrorsWebpackPlugin)
+    config.plugin('friendly-errors')
+      .use(require('@soda/friendly-errors-webpack-plugin'), [{
+        additionalTransformers: [transformer],
+        additionalFormatters: [formatter]
+      }])
   }
 }

config/styleLintPlugin.js

@@ -0,0 +1,40 @@
+module.exports = ({ config, options: { stylelint: { lintOnSave = false, extensions } = {} }, api }) => {
+  const StyleLintPlugin = require('stylelint-webpack-plugin')
+  const CodeframeFormatter = require('stylelint-codeframe-formatter')
+  const stylelint = []
+  return () => {
+    if (!lintOnSave) return
+    config
+      .plugin('stylelint')
+      .use(StyleLintPlugin, [Object.assign({
+        failOnError: lintOnSave === 'error',
+        files: ['src/**/*.{vue,htm,html,css,sss,less,scss}'],
+        formatter: CodeframeFormatter
+      }, stylelint)])
+      .end()
+      .plugin('friendly-errors')
+      .tap(([options]) => {
+        ['Transformers', 'Formatters'].forEach((name) => {
+          const optKey = `additional${name}`
+          let plugins
+          if (Array.isArray(options[optKey])) {
+            plugins = options[optKey]
+          } else {
+            plugins = []
+            Object.assign(options, { [optKey]: plugins })
+          }
+
+          let plugin
+          try {
+            const pluginName = name.toLowerCase().slice(0, -1)
+            plugin = require('./stylelintError')[pluginName]
+          } catch (e) {
+            return
+          }
+
+          plugin && plugins.push(plugin)
+        })
+        return [options]
+      })
+  }
+}

docs/课时11.md

@@ -0,0 +1,55 @@
+# 添加 stylelint
+
+### 配置 stylelintrc
+
+使用 stylelint-config-standard 插件
+
+.stylelintrc.js
+
+```js
+module.exports = {
+  root: true,
+  extends: 'stylelint-config-standard'
+}
+```
+
+### 配置 stylelint 插件
+
+```js
+module.exports = ({ config, options: { stylelint: { lintOnSave = false, extensions } = {} }, api }) => {
+  const StyleLintPlugin = require('stylelint-webpack-plugin')
+  const CodeframeFormatter = require('stylelint-codeframe-formatter')
+  const stylelint = []
+  return () => {
+    config
+      .plugin('stylelint')
+      .use(StyleLintPlugin, [Object.assign({
+        failOnError: lintOnSave === 'error',
+        files: ['src/**/*.{vue,htm,html,css,sss,less,scss}'],
+        formatter: CodeframeFormatter
+      }, stylelint)])
+  }
+}
+```
+
+### 代码提交检查
+
+```json
+{
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{vue,htm,html,css,sss,less,scss}": [
+      "webpack-box lint stylelint",
+      "git add"
+    ],
+    "*.{js,jsx}": [
+      "webpack-box lint eslint",
+      "git add"
+    ]
+  }
+}
+```

package.json

@@ -30,6 +30,7 @@
     "@babel/preset-react": "^7.7.4",
     "@babel/preset-typescript": "^7.6.0",
     "@commitlint/config-conventional": "^8.2.0",
+    "@soda/friendly-errors-webpack-plugin": "^1.7.1",
     "@typescript-eslint/parser": "^2.10.0",
     "@vue/cli-shared-utils": "^4.1.1",
     "acorn": "^7.1.0",
@@ -75,6 +76,10 @@
     "sass": "^1.23.7",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
+    "stylelint": "^12.0.0",
+    "stylelint-codeframe-formatter": "^1.0.4",
+    "stylelint-config-standard": "^19.0.0",
+    "stylelint-webpack-plugin": "^1.1.2",
     "thread-loader": "^2.1.3",
     "typescript": "^3.7.2",
     "vue-cli-plugin-commitlint": "^1.0.10",
@@ -100,6 +105,10 @@
     }
   },
   "lint-staged": {
+    "*.{vue,htm,html,css,sss,less,scss}": [
+      "webpack-box lint stylelint",
+      "git add"
+    ],
     "*.{js,jsx}": [
       "webpack-box lint eslint",
       "git add"

packages/stylelint/lint.js

@@ -86,7 +86,7 @@ module.exports = async function lint({ api, args = {}, pluginOptions = {} }) {
         } else {
           console.log(format(
             chalk`{bgGreen.black  DONE }`,
-            `stylelint 没有发现错误!${options.fix ? chalk` {blue (autofix enabled)}` : ''}`
+            `stylelint 没有发现错误!${options.fix ? chalk` {blue (已经自动修复)}` : ''}`
           ))
         }
       }

src/style/app.css

@@ -1,4 +1,4 @@
 /* app.css */
 .test {
   font-size: 60px;
-}
+}

src/style/index.css

@@ -5,4 +5,4 @@
   color: red;
   display: flex;
   background-color: orange;
-}
+}

src/style/index.less

@@ -1,4 +1,4 @@
 /* index.less */
 .test {
   width: 300px;
-}
+}

src/style/index.postcss

@@ -6,4 +6,4 @@
 
 .asd {
   height: 100px;
-}
+}

src/style/index.scss

@@ -1,4 +1,4 @@
 /* index.scss */
 .test {
   height: 300px;
-}
+}

util/resolveLoaderError.js

@@ -0,0 +1,47 @@
+const chalk = require('chalk')
+
+const rules = [
+  {
+    type: 'cant-resolve-loader',
+    re: /Can't resolve '(.*loader)'/,
+    msg: (e, match) => (
+      `Failed to resolve loader: ${chalk.yellow(match[1])}\n` +
+      'You may need to install it.'
+    )
+  }
+]
+
+exports.transformer = error => {
+  if (error.webpackError) {
+    const message = typeof error.webpackError === 'string'
+      ? error.webpackError
+      : error.webpackError.message || ''
+    for (const { re, msg, type } of rules) {
+      const match = message.match(re)
+      if (match) {
+        return Object.assign({}, error, {
+          // type is necessary to avoid being printed as defualt error
+          // by friendly-error-webpack-plugin
+          type,
+          shortMessage: msg(error, match)
+        })
+      }
+    }
+    // no match, unknown webpack error without a message.
+    // friendly-error-webpack-plugin fails to handle this.
+    if (!error.message) {
+      return Object.assign({}, error, {
+        type: 'unknown-webpack-error',
+        shortMessage: message
+      })
+    }
+  }
+  return error
+}
+
+exports.formatter = errors => {
+  errors = errors.filter(e => e.shortMessage)
+  if (errors.length) {
+    return errors.map(e => e.shortMessage)
+  }
+}