前菜の種類
vscodeでコードを書くときは、以下のようにテキストを選択する必要があります。
しかし、ほとんどの場合、以下のようにクラス名全体を選択したいと思います。
其实这个就牵扯到了 vscode 的分词机制，它认为-应该截断文本
其实不止-，还有其他字符都被 vscode 认为是分隔符
以下の構成を提供している。
{
// 如下是被vscode认为是分隔符的字符
// 我们在设置中搜索editor.wordSeparators
// 然后根据自己的需要删除不想要的分隔符即可
// 比如删除@，这样我们就可以直接选中less变量和装饰器如@xxx
"editor.wordSeparators": "`~#!@$%^&*()-=+[{]}\\|;:'\",<>/?."
}
Webstormの設定を全部見てみましたが、似たような設定は見つかりませんでした。Webstormの設定方法を知っている人がいれば、コメント欄にコメントを残してください。
上記の小さな設定がコードの効率と幸福を向上させると思うなら、下を見てください。失望することはありません。
VSCodeとの出会いは美しいものではない。
私はJava入門プログラミングを通じて、最初のエディタとの接触はEclipseであり、その後アイデアはますます燃えているので、私はJetBrainsホームエディタとの最初の接触を聞かせて、私はアイデアを使用し始めたときに深くショックを受け、元のエディタ間にギャップがあります。その後、偶然がフロントエンドになり、JBホームのために作られた実際のフロントエンドエディタWebstormとの最初の接触は、アイデアの使用が非常に精通しているため、基本的にシームレスに切り替えます。
私は常に数学に興味があったので、子供の頃に数学のコンテストに参加し、いくつかのアルゴリズム問題に触れ、Java開発の経験があるので、TypeScriptはすぐに習得でき、非常に興味があります。この2つが得意なので、学歴が平凡で、コンピュータ関連の専攻ではなくても、JJやLAの面接官に認められ、クラスメートになることができます。
JZに入社したばかりの時、同社は本物のJetBrains開発ツールを提供していたので、周りの学生が無料のVScodeを使っていることがわかりました。なぜWebstormを入れずにVScodeを使うのか不思議に思いました。料金の方がいいでしょう!だから、グループ内の私だけがwebstormを使用していて、セキュリティ上の理由から、私たちのグループはプラグインをインストールする必要がありましたが、最初はvscodeバージョンだけで、vscodeを使用する必要があることを意味し、私は使用しようとしましたが、彼女と白い紙が見つかり、私は非常に慣れていないので、使用を拒否し、メンターと喧嘩しました。
今来て、私は購入を支払ったときにCPUに与えられていると推定され、自分自身が悪い頭ではないと説得するために、自分自身を催眠している。メンターに感謝しなければなりませんでしたが、彼女はまだあきらめず、心理学部の学生を見つけて心理カウンセリングとプラグイン開発グループの学生を私のためにvscode関連設定を説明し、開発をより面白くしました。ここで、私の人生で出会った人たちに感謝してください。世界は優しくはありませんが、本当に優しい人もいます。
あまり言わずに、本題に入ります。フロントエンド開発の分野は異なるので、分類して説明します。
一般的に
文字列内のファイルパスは、対応するファイルにすばやくジャンプします。
一部の文字列ファイルパスはcmd+クリックジャンプをサポートします。ほとんどのインポートステートメントと同様に、下の図を参照。
しかし、他の場所の文字列内のファイルパスのほとんどはジャンプをサポートしていません。
プラグインをインストールする
https://marketplace.visualstudio.com/items?itemName=duXing.quick-go-to-selected-file-path
ファイルのパスを含む文字列にマウスカーソルを置き、cmd + e（WindowsシステムのCtrl + e）を使用します。
最も一致するファイルクエリをポップアップすることができ、私が使用している限り、最初のものが常に最も一致します。
デフォルトの動作が一致しない場合は、手動で文字列を選択すると、選択した文字列を正確に検索します。
このショートカットが要件を満たさない場合は、自分で変更できます。
高速でクリアな印刷デバッグ
トラブルシューティングのために何かを印刷する必要があることもありますが、ほとんどの場合、これはテンプレート操作です。
次の図のように、印刷する変数をコピーし、カスタムコードスニペットを入力します
"log打印": {
"prefix": "clog",
"body": ["console.log('[ $CLIPBOARD ] >', $CLIPBOARD)$0"],
"description": "log打印",
"scope": "typescript,typescriptreact,javascript,javascriptreact"
},
実際にはマクロを設定することで完了できます。
プラグインをインストールして実装することもできます似たようなプラグインはたくさんあります
興味のある方はコンソールのキーワードで検索できます。
https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log
ここでは、非常に便利なvscodeコードスニペット生成ツールをお勧めします。
https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode
たとえば、よく使うコードスニペットやWebstormから便利なコードスニペットを転送します。
明確なコードを強調
コードを表示するときにファイルにアクセスする必要はなく、マウスhovreも必要なく、コードの種類を知ることができます。
紫色の太字のプロパティを見ると読み取り専用だとわかります
緑のイタリック体を見れば列挙、紫のイタリック体は列挙値だとわかります
黄色の下線を見ると、asyncで修飾されたメソッドであることがわかり、無意識のうちにawait呼び出しを追加するかどうかを検討します。eslintのようなものも検出できますが、万能な警告に過ぎません。実際にawait修飾を加える必要はなく、すべての警告は良いことでしょうか？無駄な警告や誤った警告でさえ、コードを書く気分に影響するだけです。セマンティクスを表現する必要があります変数や属性などの他の色とは異なります
より迅速な入り口。
リソースマネージャとソース管理パネルの機能タブは、ドラッグまたは非表示にできます。
不要なタブを隠してエクスプローラをきれいにする
一般的なgitlensタブをドラッグして、gitビューをより大きく、より明確にすることもできます。
ファイルレベルを明確にする。
デフォルトでは、1つのフォルダの下に1つのフォルダしかない場合、2つのフォルダは統合されます。
下のスタイルはpublicですか？
いいえ、実際にはCSSです。この不均一なディスプレイは少なくとも私を混乱させます。
以下のように変更すると、以下のようになります。
"explorer.compactFolders": false
vscode独自の強力な機能で非プロジェクトファイルをすばやく開き、変更できます
時には、設定ファイルやホストファイルを変更する必要があるツールをインストールして使用することもありますが、これらの記事は一般的にVimなどのコマンドを使用すると言いますが、正直に言うと、使いにくいだけでなく、不明瞭に見えるだけでなく、変更は不便です。下の写真は
実際、vscodeはコードコマンドを提供しており、ファイルやフォルダを開くのに便利であり、上記のファイルも変更できます。
端末で選択されたテキストの自動コピー
プロジェクトを開始する際に、Baiduを通じて解決する必要があるエラーが発生することがあります。
この時点で、いくつかの端末が印刷したキーワードを検索する必要があり、自動コピーを設定すると手動コピー操作を省略できます。
"terminal.integrated.copyOnSelection": true
ドラッグアンドドロップによる選択項目の移動を禁止する
時々テキストが選択されますが、誤ってコードを他の場所に移動します。
これは人によって異なりますが、私はこの機能を必要としませんが、時々誤ってタッチさせて混乱します。
// 改为false即可禁止拖动
"editor.dragAndDrop": false
コードヒントとジャンプ。
package.json
一部のパッケージのバージョンは^修飾を使用しており、バージョンが完全にロックされていないため、マイナーバージョンに問題がある場合があります。
インストールしたバージョンを知る必要があります。
下の図から、現在インストールされているバージョン、最新バージョンを知ることができ、詳細を見ることができます。
いくつかのパッケージは間接的に依存しており、package.jsonにリストされていないことは知っていますが、node_moduelsには直接検索できるかどうか知りたいです。
Vue
プロパティとメソッドのヒントとジャンプ。
CSSクラス名ヒントとジャンプ
Vuexジャンプ
ファイルパスヒントとジャンプ
React
本人主用 react，个人认为vscode 对 react支持比 vue 更好，上vue 能做出来的，react 也能能做出来的，就不说了
CSSの簡単な例を挙げましょう。
ちなみに、classNameが文字列かjsx式かのような関連するプロパティの値については、vscodeはデフォルトで自動的に推論されます。つまり、classNameはデフォルトで文字列です。
したがって、私のプロジェクトではcssmoduleを使用していますが、実際にはjsx式を入力する必要があります。実際には、classNameを含むほとんどのプロパティ値は、実際に入力したいjsx式で、次のように設定できます。
"javascript.preferences.jsxAttributeCompletionStyle": "braces",
"typescript.preferences.jsxAttributeCompletionStyle": "braces"
Webstormといえば、大文字小文字も知らないのですか？これは動作しますか？***** ジャンプしますか？本当に ***!
ここでは、ウェブストームの大きな欠点は、常に強制的なプロンプトが好きで、人々に非常にインテリジェントな感じを与えると言わなければなりません。だから食べて性能がいい、カトンしやすい。
vscodeは正しいプロンプトを表示するだけでなく、エラーを明確に説明し、解決策を提供します。
おわりにまとめ
2年半以上の開発者として、vscodeは強力なコードヒントと検索とコードジャンプを通じて私がより効率的な開発効率を持っているように、vscodeはわずか半年で、大企業の従業員が無料で使用することができ、基本的にvscodeを使用することができます。
本人は最近升进材料を准备しているので、ちょっと忙しい。そして、構成が少し多いので、読むのを遅らせないために、私は機能の一部しか傍受しません。
読者の先生がどんな痛みを経験してもコメント欄にコメントを残すことができます、私は一つ一つ解決します、私の能力を信じてください!私が昇進したら、基本的にコードを書く必要はありません。その時点で記事を完成させ、vscodeのテクニックに関する特別なトピックを作成します。
良いことをするには、まず良いことをする。適切なエディタを持つことは、開発効率と幸福を大幅に向上させます。結局のところ、編集者との時間はオブジェクトとの時間よりも長くなります。
webstormは使いやすい人もいるかもしれませんが、vscodeは宇宙エディタ#.#と呼びたいです。
おそらく、プログラマーの世界では、料金は必ずしも最高ではありません!!