01月04, 2018

Lint your code

一直以来总是把代码质量、规范、文档挂在嘴边,项目里却总会因为这样、那样的原因几乎很少实践。这一次恰逢一个新的项目可以没有历史包袱的把流程走一遍。

技术背景

依然是基于webpack+postcss+es6的架构。

这一套脚手架算是相对比较成熟的,无论是单页多页,基于vue,react或是与传统架构结合,局部配置略有不同,但均已在项目中实践过。

另外结合vscode对检查出来的问题进行自动fixed和format。关于下面stylelint,eslint, jsdoc的科普介绍网上有很多,这里就不再赘述了,下面主要着重讲解下在工程方面的配置。

Stylelint

  1. stylelint自己的配置,stylelint-config-daemon, 是基于stylelint-config-standard进行的扩展。

  2. 结合postcss的配置, 如postcss.config.js。其中postcss-reporter是为了让显示错误和警告的格式更规则化。

    module.exports = (ctx) => {
    return {
    plugins: [
     require('postcss-import')({
       addDependencyTo: ctx.webpack,
       plugins: [
         require('stylelint')({
           config: require('./stylelint.config.js'),
         }),
       ],
     }),
     require('precss'), // 预处理插件
     require('postcss-inline-block'),
     require('postcss-opacity'),
     require('autoprefixer')({
       browsers: ['>= 1%', 'not ie <= 8'],
     }),
     require('postcss-discard-comments'),
     require('postcss-discard-empty'),
     require('postcss-reporter')({
       clearMessage: true,
     }),
    ],
    }
    
  3. vscode安装插件stylelint 和 stylefmt 前者用来根据配置检测文件,后者用来根据规则自动修复,进行格式化。其中关于它们的配置:

    "stylefmt.config": "yourfilepath/stylelint.config.js",
    "stylefmt.useStylelintConfigOverrides": true,
    
  4. 可能遇到的问题:

    • precss语法没有被解析到(现在不能复现了。。)
    • a:first-child,如果配置了优先级的rules, 必须在a 的后面
    • vscode的stylefmt失效,有可能是插件用的包里依赖stylelint版本不对,需要进入到插件里手动升级下。

ESLint

  1. 用于对JS代码的静态质量检查。是目前js代码检查工具中最新的,易用,可扩展性强。对ES6支持度最好的,也是唯一支持JSX的。采用的配置文件格式可以是.json, 或者.js的。

  2. 为什么要用babel-eslint

    为了检测es6的语法,将babel-eslint作为ESLint的parser

  3. ESLint自己的配置,stylelint-config-daemon, 是基于eslint-config-standard进行的扩展。

  4. webpack的配置, 需要在babel-loader之前进行代码检查。新增一个rules:

    {
    enforce: 'pre',
    test: /\.js$/,
    include: [path.resolve(__dirname, 'tpls'), /\*.config.js/],
    exclude: /node_modules/,
    loader: 'eslint-loader',
    options: {
     failOnWarning: false,
     failOnError: false,
     formatter: require('eslint-friendly-formatter'),
    },
    },
    
  5. vscode插件

    安装ESLint插件,然后修改配置:

    "javascript.validate.enable": false,
    "eslint.options": {
    "configFile": "yourfilepath/.eslintrc.js" 
    },
    

JSDoc

  1. 全局安装jsdoc后即可使用jsdoc的命令来进行文档生成。文档生成后在本地的一个静态页面。

    如:jsdoc -c jsdoc.conf.json -R README-DOC.md。 其中README-DOC.md是生成文档的home页面。

  2. vscode插件

    安装Document This。个人感觉比vscode自带的提示全一些。

  3. 生成文档的问题(暂时还未解决)

    • 主要是export出class时,会多导出exports.A,
    • 或是exprot default class A,会多导出module.exports
  4. 发现jsdoc并不会检测以下划线开头的文件内容。如'_suggest.js'

最后

  1. 有一些大厂的规范,虽然很好,但未必适用于自己的项目。还是需要根据实际情况进行定制。就如同再好的技术,如果不能在业务上得到应用,服务于业务,那可能也只是技术自己的狂欢,带不来一群人的狂欢。

  2. 老代码新增这些检测,逐步一部分一部分的进行修改,需要耐心。

  3. 博客越写越像流水账。。

参考

本文链接:https://imjiaolong.cn/post/linters.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。