lintについてメモ

htmllint

• npm
  • htmllint - npm
  • htmllint-cli - npm
• references
  • npmパッケージのhtmllintについて - Lintルールのカスタマイズ - - Qiita
  • htmllintのオプション - Qiita

eslint

• npm
  • eslint - npm
• references
  • ESLint - Pluggable JavaScript linter
  • ESLint 最初の一歩 - Qiita

stylelint

• npm
  • stylelint - npm
  • stylelint-scss - npm
• references
  • User guide ・ stylelint
  • stylelintのルール簡単説明（v5.4.0）
  • stylelint入門 - Qiita
  • stylelint,prettierを使ってscssのコード品質を保つ - みわのブログ
  • フロントエンドにESLint、Prettier、stylelintを導入して快適な開発環境を整えました - Cluex Developersブログ
  • stylelint: モダンCSSリンター - Qiita

Prettier

ESLint

• List of available rules - ESLint - Pluggable JavaScript linter
• Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita
• ESLint - Prettier連携のやり方と仕組み - Qiita
• prettier-v1.13.7チートシート - Qiita

stylelint

• 注目のコードフォーマッター「Prettier」でCSSを整形する方法 | satoyan419.com

TypeError: Cannot set property 'useTabs' of nullが表示される場合の対処

• TSLintとstyleLintと合わせてPrettierを使ってみる | とあるクリエイターのエンジニアブログ | T-CREATOR
• Cannot set property 'singleQuote' of null ・ Issue #9 ・ hugomrdias/prettier-stylelint

Prettier周りのメモ

Stylelint

• stylelint,prettierを使ってscssのコード品質を保つ - Qiita

ESLint

• ESLint ルール 一覧 (日本語) - galife
• Prettier を ESLint と併用して使ってみた - Corredor
• ESLintのエラールール。日本語ざっくり解説[ベストプラクティス編] - Qiita
• クソコード量産プロジェクトを撲滅するためのESLint導入物語 - Qiita
• ESlint, prettierを使ってjavascript, vueのコード品質を保つ - Qiita

error Replace ・・・・・・ with ・・・・・・・・のようなエラーが大量に出る

  39:1   error  Replace `・・・・・・` with `・・・・・・・・`
                prettier/prettier
  40:1   error  Insert `・・`

のようなエラーが大量に出る

• create nuxt-appした初期プロジェクトでprettierからエラーが出て動かない - Qiita
• switct-case 文でインデントした時に ESLint の警告を受けないように - Qiita

スペース4つルールにしたかったのですが、どうにも直らなかったのでコードの方をデフォルトスペース2つにして適合させることにしました……。

以下試したルール。

.eslintrc.json

    "rules": {
        "indent": ["error", 4],
        "prettier/prettier": [
            "error",
            {
                //一行辺りの文字数
                "printWidth": 120,
                //折り返しをしない
                "proseWrap": "never",
                //インデント
                "indent": ["error", 4],
//略

.orettierrc

{
    "printWidth": 120,
    "proseWrap": "never",
    "indent": ["error", 4],
    "useTabs": false,
    "semi": true,
    "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 4 }],
    "singleQuote": true
}

package.json

    "prettier": {}

3箇所に"indent": ["error", 4],を入れたのですが効果なく、全て"indent": ["error", 2],に変えました……。

newline-per-chained-callが効かない

    "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 4 }],

を指定しているのに、チェーンメソッドが改行されてしまう問題。

//before
$navbar.find('.nav-item:not(.dropdown)').find('a').on('click', function() {

//after
$navbar
    .find('.nav-item:not(.dropdown)')
    .find('a')
    .on('click', function() {

• Preventing chained calls on multiple lines doesn't work ・ Issue #109 ・ prettier/prettier-eslint-cli
• Doesn't run the .eslintrc rules with eslintIntegration is true ・ Issue #225 ・ prettier/prettier-vscode
• javascript - Atom Prettier + Eslint - Stack Overflow

同じ問題に当たっている方は散見されるのですが、これといって解決策が今のところ見付かっていません。