https://github.com/ecomfe/htmlcs
HTML Code Style
https://github.com/ecomfe/htmlcs
Last synced: 10 months ago
JSON representation
HTML Code Style
- Host: GitHub
- URL: https://github.com/ecomfe/htmlcs
- Owner: ecomfe
- License: mit
- Created: 2014-11-24T06:47:42.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2018-12-18T06:23:29.000Z (over 7 years ago)
- Last Synced: 2025-07-02T08:10:43.498Z (about 1 year ago)
- Language: JavaScript
- Size: 603 KB
- Stars: 46
- Watchers: 16
- Forks: 8
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
htmlcs
========
[](http://travis-ci.org/ecomfe/htmlcs)
[](https://www.npmjs.com/package/htmlcs)
[](https://coveralls.io/r/ecomfe/htmlcs)
[](https://david-dm.org/ecomfe/htmlcs)
[](https://david-dm.org/ecomfe/htmlcs)
HTML code style check & format tool.
### Install
npm i -g htmlcs
### Usage
* in CLI
```shell
Usage: htmlcs [options] [target...]
Commands:
hint Do hint given file(s)
format Do format given file(s)
Options:
-h, --help Show help [boolean]
-c, --config Path to custom configuration file. [string]
--diff Check code style and output char diff. [boolean]
-i, --in-place Edit input files in place; use with care! [boolean]
-v, --version Show version number [boolean]
Examples:
htmlcs hint foo.html do hint foo.html
htmlcs hint foo.html bar.html do hint foo.html & bar.html
htmlcs hint ./ do hint html files under ./
htmlcs format foo.html do format foo.html
htmlcs format --diff foo.html do format foo.html & show diff result
htmlcs format --in-place foo.html do format foo.html & write file in place
```
* in Node.js / browser (with [browserify](https://github.com/substack/node-browserify))
* hint file
```javascript
var htmlcs = require('htmlcs');
var result = htmlcs.hintFile(filePath);
```
* hint code (string)
```javascript
var htmlcs = require('htmlcs');
var result = htmlcs.hint(code);
// Or
htmlcs.hintAsync(code).then(
result => { /* ... */ }
);
```
* use hint result
```javascript
result.forEach(function(item){
console.log(
'[%s] line %d, column %d: %s (%s, %s)',
item.type,
item.line,
item.column,
item.message,
item.rule,
item.code
);
});
```
* format file
```javascript
var htmlcs = require('htmlcs');
console.log(htmlcs.formatFile(filePath));
```
* format code (string)
```javascript
var htmlcs = require('htmlcs');
console.log(htmlcs.format(code));
// Or
htmlcs.formatAsync(code).then(
result => console.log(result)
);
```
* add rule
```javascript
var htmlcs = require('htmlcs');
htmlcs.addRule({
name: 'test-rule',
desc: 'Just a test rule.',
lint: function (getCfg, document, reporter) {
reporter.warn(
1,
'099',
'This is a test waring!'
);
}
});
var result = htmlcs.hint(code);
```
* with Gulp/Grunt
There is no official Gulp/Grunt plugin yet. We recommend [fecs](https://github.com/ecomfe/fecs), which uses htmlcs to hint HTML code and provides a wealth of tools.
- [fecs-gulp](https://github.com/ecomfe/fecs-gulp)
- [fecs-grunt](https://github.com/ecomfe/fecs-grunt)
### Rules & Codes
[lib/rules/](./lib/rules/)
[rule map](./lib/default/rule-map.json)
### Config
* default: [lib/default/.htmlcsrc](./lib/default/htmlcsrc)
* custom:
Custom rule file (.htmlcsrc) can be placed in the same/parent directory of target file, or the `~/` directory.
If found in neither paths, the default config will be used.
* inline:
- disable
```html
```
- enable
```html
```
- config
```html
```
### Relative third-party tools
* [grunt-htmlcs](https://github.com/RRMoelker/grunt-htmlcs)