2016-11-02 12 views
0

私はstylelintウェブサイトgithubに行き、npm経由でローカルにダウンロードしました。私はstylelintのためのNPMフォルダ内の「検索」行うと、私はこのフォーマットを使用する任意の例を見つけることができませんstylelint - 独自のプラグインを作成する例はありますか?

var myPluginRule = stylelint.createPlugin(ruleName, function(primaryOption, secondaryOptionObject) { 
    return function(postcssRoot, postcssResult) { 
    var validOptions = stylelint.utils.validateOptions(postcssResult, ruleName, { .. }) 
    if (!validOptions) { return } 
    // ... some logic ... 
    stylelint.utils.report({ .. }) 
    } 
}) 

:stylelintのウェブサイトは、私自身のプラグインを作成するために、私はこのフォーマットを使用する必要があることを助言します。誰もあなた自身のプラグインを作成する上で本当に良いチュートリアルをアドバイスできますか?

ありがとう

答えて

0

私は文字通り方法を見つけました。

1)前提条件:

$ npm init 
$ npm install gulp stylelint gulp-style-lint --save-dev 

2)./scss/myfile.scss

体{背景:赤;}にいくつかのSCSSファイルを作成

3)を作成します。 /gulpfile.js

var gulp   = require('gulp'); 
var gulpStylelint = require('gulp-stylelint'); 

gulp.task('stylelint',function(){ 
    return gulp   
    .src('./scss/*.scss') 
    .pipe(
     gulpStylelint({ 
     reporters: [ 
      {formatter: 'string', console: true} 
     ] 
     }) 
    ); 
}) 

4)./stylelintCustom/indexを作成します。 js

var stylelint = require("stylelint"); 
var ruleName = "steves/steve1"; 

var messages = stylelint.utils.ruleMessages(ruleName, { 
    rejected: 'steve rejects this', 
}); 

module.exports = stylelint.createPlugin(ruleName, function(max, options) { 

    return function(root, result) {  
     // to access the variable for the whole of this file scss =   
     console.log(root.source.input); 

     // apply rules now... 
     // run reporter to output 

    } 
}); 

module.exports.ruleName = ruleName; 
module.exports.messages = messages; 

ルール名に「plugins/plugin」という名前を付けてください。すなわちスティーブス/ steverule1など

5))stylelintCustom/package.json

{ 
    "name": "stylelint-steves-steve1", 
    "version": "0.0.1", 
    "main": "index.js", 
    "devDependencies": { 
    "stylelint": "~2.6.0" 
    }, 
    "engines": { 
    "node": ">=0.10.0" 
    } 
} 

6を必ず作成してください作成:stylelint.rc

{ 
    "plugins": [ 
    "./stylelintCustom/index.js" 
    ], 
    "rules": { 
    "steves/steve1": true 
    } 
} 

7)を実行一気

$ gulp stylelint 

scssを出力するので、ここで必要なjs、regexを実行できます。既存のルールはstylelintにあなたがに行くことができますどのように機能するかの参考のために

0

yourproject/node_modules/stylelint/DIST /ルール/ *

関連する問題