hauer
search
⌘ + K
開発で使用するリンターとVSCodeでのセットアップについて
Development

開発で使用するリンターとVSCodeでのセットアップについて

  • # VS Code
  • # linter
2021/08/30

リンターとは:
ソースコードを読み込んで内容を分析し、問題点を指摘してくれる静的解析ツール。

stylelint

https://stylelint.io/
CSS, SCSSなどのリンター

プロジェクト内に配置する基本の.stylelintrc

{
 "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
 "rules": {
  "at-rule-no-unknown": [ true, {
   "ignoreAtRules": [
    "return",
    "function",
    "extend",
    "extends",
    "for",
    "ignores",
    "mixin",
    "content",
    "include",
    "custom-media"
  ]
 }],
  "indentation": 2,
  "no-descending-specificity",
  "number-leading-zero": null,
  "unit-allowed-list": ["em", "rem", "s", "px", "%", "deg", "vw", "vh"]
 }
}

stylelint-config-standardとstylelint-config-recess-orderを使用。


stylelint-config-standard

https://github.com/stylelint/stylelint-config-standard
GoogleやAirbunbなどのスタイルガイドを参考にしたconfig。


stylelint-config-recess-order

https://github.com/stormwarning/stylelint-config-recess-order
Bootstrapで使われているstylelintのconfig。CSSのプロパティの順番を規定。

ESLint

JavaScriptやTypeScriptなどのリンター。
基本の.eslintrc.js

module.exports = {
 root: true,
 parser: 'babel-eslint',
 parserOptions: {
  sourceType: 'module'
 },
 env: {
  browser: true,
 },
 extends: 'standard',
 plugins: [
  'html'
 ],
 'rules': {
  'arrow-parens': 0,
  'generator-star-spacing': 0,
  'indent': [2, 2],
  'no-var': 2,
  'semi': [2, 'always'],
  'new-cap': 0
 }
}


Prettier

コードフォーマッター（ソースコードを整形してくれるツール）。読み方はプリティア。上記のstylelintとESLintと組み合わせて使用する。
以下のような様々な形式にサポートしている。

  • JavaScript
  • JSX
  • Flow
  • TypeScript
  • JSON
  • HTML
  • Vue
  • Angular
  • Ember / Handlebars
  • CSS
  • Less
  • SCSS
  • styled-components 💅
  • styled-jsx
  • GraphQL
  • Markdown
  • YAML


Editor Config for VS Code

https://editorconfig.org/
EditorConfigとは、異なるテキストエディタ間でも共通の設定を定義することができるプラグインです。EditorConfigを導入することにより複数人での開発がスムーズになります。
基本の.editorconfig

# editorconfig.org
root = true
​
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
​
[*.md]
trim_trailing_whitespace = false


VSCodeで自動整形できるようにする


1.「stylelint」「ESLint」「Editor Config for VS Code」をインストール

VS Codeの上部メニューバーの「View」>「Extensions」を選択（またはサイドバーから選択）して上部検索窓から「stylelint」「ESLint」「Editor Config for VS Code」をそれぞれ検索してインストール。
※ 似たような名前の異なるプラグインに注意



2. settings.jsonに追記

VS Codeの上部メニューバーの「View」>「Command Parrete」を選択（またはShift + Command + P）して「settings.json」を検索&表示
settings.json

{
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.formatOnSave": true,
 "css.validate": false,
 "scss.validate": false,
 "eslint.format.enable": true,
 "editor.codeActionsOnSave": {
   "source.fixAll": true
 },
 // …その他の設定
}


3. VS Codeを再起動

これで完了です。

~~ END ~~