2019-11-02、03 到達点メモ
環境移行の影響で、eslintとprettierの設定が吹っ飛んでしまった
ひとまず、近い形にはなったので手順を書いておく
ローカルではなく、グローバルでやりたかったので
それに準拠する
*Windows環境の話です
- node.jsをダウンロードする
- npmが動くはずなので以下のコマンドを入力する
npm i -g eslint prettier npm eslint-plugin-prettier eslint-config-prettier prettier-eslint
- VSCodeを立ち上げて、拡張機能のESlintとPrettierをそれぞれ入れる
- Eslintの拡張機能でESlint: Auto Fix On Saveにチェックを入れる
- Ctrl+,で設定画面を開き、Format on Saveで検索し、チェックを入れる
- .eslintrc.js(eslintrcの前に「.」が付く)を作成し以下の内容にする
module.exports = {
env: {
browser: true,
es6: true,
},
extends: ['eslint:recommended', 'plugin:prettier/recommended'],
};
- .prettierrc.js(prettierrcの前に「.」が付く)を作成し、以下の内容にする
module.exports = {
tabWidth: 2,
singleQuote: true,
trailingComma: 'es5',
};
多分これで動くはず
参考サイト:
ESLint 最初の一歩 - Qiita
ESLint - Prettier連携のやり方と仕組み - Qiita
VS Code の便利なショートカットキー - Qiita
VS CodeにPrettier・ESLint・Stylelintを導入してファイル保存時にコードを自動整形させる方法 | WEMO
ESLintとPrettierを併用するときの設定(eslint-plugin-prettier, eslint-config-prettier) - dackdive's blog
以前にメソッドと括弧の間にスペースが挿入される設定だったのだが
できなくなったので調べてみた。
どうやら、メソッドと括弧の間にスペースが挿入されるのは
Eslint側でspace-before-function-parenをやればできるのようなのだが
ここのページによるとPreitterにはspace-before-function-parenに
あたる機能がないらしく、実際にPrettierのOptionページを見た限りではなさそうである
参考サイト:
ESLintのエラールール。日本語ざっくり解説[スタイル編] - Qiita
space-before-function-paren - Rules - ESLint - Pluggable JavaScript linter
Options · Prettier
ESLint - Prettier連携のやり方と仕組み - Qiita
console.logで警告が出る問題は以下の内容にしたら
あっさり解決できた。
rules: { 'no-console': ['error', { allow: 'warn' }] },
参考サイト:
no-console - Rules - ESLint - Pluggable JavaScript linter
◆その他
自分は今Braveというブラウザを使っているのだが
その際に現在選択しているタブが見にくかった
そこで選択しているタブだけ変更する方法を調べたところ
テーマで選択しているタブの色を変更することができることがわかった。
Black&Whiteのほうがわかりやすいが、もうちょっと白を抑えた感じにしたかったので
現在はSerenityを試験的に使っている
今日はここまで
ひとまず、近い形にはなったので手順を書いておく
ローカルではなく、グローバルでやりたかったので
それに準拠する
*Windows環境の話です
- node.jsをダウンロードする
- npmが動くはずなので以下のコマンドを入力する
npm i -g eslint prettier npm eslint-plugin-prettier eslint-config-prettier prettier-eslint
- VSCodeを立ち上げて、拡張機能のESlintとPrettierをそれぞれ入れる
- Eslintの拡張機能でESlint: Auto Fix On Saveにチェックを入れる
- Ctrl+,で設定画面を開き、Format on Saveで検索し、チェックを入れる
- .eslintrc.js(eslintrcの前に「.」が付く)を作成し以下の内容にする
module.exports = {
env: {
browser: true,
es6: true,
},
extends: ['eslint:recommended', 'plugin:prettier/recommended'],
};
- .prettierrc.js(prettierrcの前に「.」が付く)を作成し、以下の内容にする
module.exports = {
tabWidth: 2,
singleQuote: true,
trailingComma: 'es5',
};
多分これで動くはず
参考サイト:
ESLint 最初の一歩 - Qiita
ESLint - Prettier連携のやり方と仕組み - Qiita
VS Code の便利なショートカットキー - Qiita
VS CodeにPrettier・ESLint・Stylelintを導入してファイル保存時にコードを自動整形させる方法 | WEMO
ESLintとPrettierを併用するときの設定(eslint-plugin-prettier, eslint-config-prettier) - dackdive's blog
以前にメソッドと括弧の間にスペースが挿入される設定だったのだが
できなくなったので調べてみた。
どうやら、メソッドと括弧の間にスペースが挿入されるのは
Eslint側でspace-before-function-parenをやればできるのようなのだが
ここのページによるとPreitterにはspace-before-function-parenに
あたる機能がないらしく、実際にPrettierのOptionページを見た限りではなさそうである
参考サイト:
ESLintのエラールール。日本語ざっくり解説[スタイル編] - Qiita
space-before-function-paren - Rules - ESLint - Pluggable JavaScript linter
Options · Prettier
ESLint - Prettier連携のやり方と仕組み - Qiita
console.logで警告が出る問題は以下の内容にしたら
あっさり解決できた。
rules: { 'no-console': ['error', { allow: 'warn' }] },
参考サイト:
no-console - Rules - ESLint - Pluggable JavaScript linter
◆その他
自分は今Braveというブラウザを使っているのだが
その際に現在選択しているタブが見にくかった
そこで選択しているタブだけ変更する方法を調べたところ
テーマで選択しているタブの色を変更することができることがわかった。
Black&Whiteのほうがわかりやすいが、もうちょっと白を抑えた感じにしたかったので
現在はSerenityを試験的に使っている
今日はここまで