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即可



根据提示更改即可