tp5下使用代码检查工具jshint和csslint和htmlhintrc

安装jshint

　　JSHint的官方地址是http://jshint.com/，GitHub 地址：https://github.com/jshint/jshint

　　一般地，使用npm来安装jshint。所以，首先需要安装nodejs，然后使用npm install jshint -g命令来安装jshint

CSSLint

　　CSSLint的安装比较简单，使用npm install csslint -g安装即可

需要的自己手动建的几个文件，放到与application同级的public/static下面

.csslintrc  //需要屏蔽的错误，如不填写则使用默认的规范

{
   "order-alphabetical":false,
   "adjoining-classes":false,
    "box-sizing":false,
    "box-model":false,
    "compatible-vendor-prefixes": false,
    "floats":false,
    "font-sizes":false,
    "grandients":false,
    "important":false,
    "known-properties":false,
    "outline-none":false,
    "qualified-headings":false,
    "regex-selectors":false,
    "shorthand":false,
    "text-indent":false,
    "unique-headings":false,
    "universal-selector":false,
    "unqualified-attributes":false,


    "ids":false,
    "star-property-hack":false,
    "vendor-prefix":false,
    "hex or RGB":false,
    "fallback-colors":false
}

.htmlhintrc 

{
	 "tagname-lowercase": true,
	 "attr-lowercase": true,
	 "attr-value-double-quotes": true,
	 "attr-value-not-empty": false,
	 "attr-no-duplication": true,
	 "doctype-first": true,
	 "tag-pair": true,
	 "tag-self-close": false,
	 "spec-char-escape": true,
	 "id-unique": true,
	 "src-not-empty": true,
	 "title-require": true,
	 "alt-require": true,
	 "doctype-html5": true,
	 "id-class-value": "dash",
	 "style-disabled": false,
	 "inline-style-disabled": false,
	 "inline-script-disabled": false,
	 "space-tab-mixed-disabled": "space",
	 "id-class-ad-disabled": false,
	 "href-abs-or-rel": false,
	 "attr-unsafe-chars": true,
         "head-script-disabled": true

}

.jshintrc//暂时没遇到需要单独屏蔽的错误，默认使用自带的规范

{

}

package.json //需要用到的依赖放在这里面

{
  "name": "自己起个名字",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-csslint": "^2.0.0",
    "grunt-contrib-cssmin": "^2.2.1",
    "grunt-contrib-eslint": "0.0.5",
    "grunt-contrib-htmlmin": "^2.4.0",
    "grunt-contrib-imagemin": "^2.0.1",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-htmlhint": "^0.9.13"
  }
}

然后在public/static下面执行 npm install 安装依赖，安装完成以后会多出两个文件node_modules和package-lock.json

最后在public/static里面在建立一个新的文件为Gruntfile.js， 内容为需要检测的html css js的路径

module.exports = function (grunt) {
  grunt.initConfig({
    htmlmin: {
      options: {
        collapseWhitespace: true,
        preserveLineBreaks: false
      },
      files: {
        expand: true,
        src: '*.html',
        dest: 'dist/'
      }
    },
    cssmin: {
      files: {   
        expand: true,
        src: ['css/*.css', '!css/*.min.css'],
        dest: 'dist/'
      }
    },
    imagemin: {
      files: {
        expand: true,
        src: ['images/*.{png, jpg, gif}'],
        dest: 'dist/'
      }
    },
    copy: {
      main: {
        expand: true,
        cwd: 'css/',
        src: '*.min.css',
        dest: 'dist/css/'
      }
    },
    csslint: {
      options: {
        csslintrc: '.csslintrc'
      },
      // src: ['css/*.css']
        src: ['new_css/*.css'] //需要检测的文件路径
    },
    htmlhint: {
      options: {
        htmlhintrc: '.htmlhintrc'
      },
      src: []
    },
    jshint:{
      src:['new_js/*.js','!new_js/*.min.js','!new_js/*.1.4.js'],
      options:{
        jshintrc:'.jshintrc'
      }
    },
    //自动监听
    // watch: {
    //   src: {
    //     files: ['js/*.jshintrc', '!js/*.min.js', 'css/*.css', '!css/*.min.css', '*.html'],
    //     tasks: ['jshint','csslint','htmlhint'],
    //     options: {
    //       spawn: false,
    //     },
    //   },
    // }
  });

  grunt.loadNpmTasks('grunt-contrib-htmlmin');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-contrib-copy');

  grunt.loadNpmTasks('grunt-contrib-csslint');
  grunt.loadNpmTasks('grunt-htmlhint');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // grunt.registerTask('lint', ['csslint','htmlhint','jshint','watch']);
  grunt.registerTask('lint', ['csslint','htmlhint','jshint']);
  grunt.registerTask('build', ['htmlmin', 'cssmin', 'imagemin', 'copy']);
};

然后在终端里面执行 grunt lint即可

根据提示更改即可