質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

ESLint

ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

Q&A

1回答

7293閲覧

VSCodeで保存時に整形するprettierの設定を変更したい

praemf

総合スコア0

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

ESLint

ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

0グッド

0クリップ

投稿2020/10/06 20:41

前提・実現したいこと

vscodeで保存時に整形するprettierとeslintの設定を変更したい
具体的にはセミコロンを常に入れたい

発生している問題・エラーメッセージ

prettierとeslintをインストール済み
どちらの拡張機能もインストール済み
settings.jsonで"editor.formatOnSave":trueと"editor.codeActionsOnSave:{"source.fixAll.eslint":true}としている

ファイル保存時に文末にセミコロンが自動で入らないのでこれを修正したいと考え、
ルート直下に.prettierrc.jsonを作成し、"semi":trueとした
しかしこの設定が反映されず、保存時には自動でセミコロンを入れてくれない
npm run formatしたときはセミコロンを入れてくれる

ファイル保存時に走るprettierが.prettierrc.jsonで書かれた設定を反映していないと思われる
原因を知りたいです
以下にpackage.json、.eslintrc.json、.prettierrc.jsonの内容を書きます

自分ではかなり調べたつもりなのですが、全く解決法が分からず、とても困っています
どうにかして解決したいのでお力お借りしたいです

該当のソースコード

package.json

{ "name": "learn-starter", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "prettier --check \"./**/*.{tsx,ts}\" && eslint --ext .js,.ts,.tsx,jsx ./", "format": "prettier --write \"./**/*.{tsx,ts}\" && eslint --fix --ext .js,.ts,.tsx,.jsx ./" }, "dependencies": { "next": "^9.5.3", "react": "^16.13.1", "react-dom": "^16.13.1", "styled-jsx": "^3.3.0" }, "devDependencies": { "@types/node": "^14.11.5", "@types/react": "^16.9.51", "@typescript-eslint/eslint-plugin": "^4.4.0", "@typescript-eslint/parser": "^4.4.0", "eslint": "^7.10.0", "eslint-config-prettier": "^6.12.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-react": "^7.21.3", "prettier": "^2.1.2", "typescript": "^4.0.3" } }

.eslintrc.json

{ "root": true, "env": { "node": true, "browser": true, "es6": true }, "plugins": [ "react", "@typescript-eslint" ], "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking", "plugin:import/warnings", "plugin:import/typescript", "prettier", "prettier/@typescript-eslint" ], "parser": "@typescript-eslint/parser", "parserOptions": { "project": "./tsconfig.json", "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2018, "sourceType": "module" }, "rules": { "semi": [ "error", "always" ], "import/order": [ "warn", { "alphabetize": { "order": "asc" }, "newlines-between": "always" } ] } }

.prettierrc.json

{ "tabWidth": 5, "bracketSpacing": true, "semi": true, "singleQuote": true }

試したこと

.prettierrc.jsonにセミコロン以外の設定も試しに書いてみましたが、どれも反映されませんでした

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

僕もこんな感じの現象になったことありましたが,
WorkSpaceの.vscode/settings.json

json

1{ 2 "prettier.configPath": "<相対パスで良かったはず,,,>" 3}

みたいな感じで明示的に指定してあげると治りました.

投稿2020/10/07 22:51

kmdkuk

総合スコア141

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

praemf

2020/10/08 14:20

なるほど設定ファイルしていすればいいんですねやってみます これって別のプロジェクトの場合は切り替える必要ありますか?
kmdkuk

2020/10/10 08:26

僕は,いろんなプロジェクトでprettierを使っている環境にいないので,prettierを使っている各ワークスペースの.vscode/settings.jsonに書いていますね.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問