ことわざにあるように、「労働者が良い仕事をしたいのであれば、まず道具を研がなければなりません。」コードを効率的に記述したい場合は、まずツールを使いこなす必要があります。
Vscode セット簡体字中国語
外国のツールを使用して、最優先事項は当然不可欠な中国化です。
ショートカットキー「ctrl+shift+p」を押して、上部に出てくる入力ボックスに「configure language」と入力してEnterを押し、「zh-cn」を選択。この時点で、中国語のプラグインが自動的にインストールされ、vscode を再度開いて中国語のインターフェイスを表示します。vscode ユーティリティ プラグイン
vscode を選んだ理由は、軽量であることに加えて、豊富なプラグイン ライブラリが当然不可欠です。
1.タグの自動リネーム
一致する html タグを自動的に変更します。タグを変更する場合、開始タグを変更した後に終了タグを変更する必要がありますか? Auto Rename Tag をインストールした後は、今後は 1 つのタグを変更するだけでよく、切り上げると作業負荷が半分になります。
2.よりきれいに
コード書式設定プラグイン、ワンクリック書式設定コード、および保存時の自動書式設定も設定できます。記事の最後に設定を記載します。
3.コードランナー
js ファイルはコンソールに直接出力できます。いくつかの小さなアルゴリズムを記述する場合、印刷するためにページを頻繁に更新する必要はありません。
4. ターボ コンソール ログ
ワンクリックで、console.log の追加、コメント、有効化、およびすべての console.log の削除をすばやく実行できます。js をデバッグするときは、おそらく console.log を使用しますが、毎回手で入力するのは非常に面倒です。
ctrl + alt + l 选中变量之后，生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
复制代码ctrl + alt + l によって生成された console.log のみがコメント化、有効化、および削除できることに注意してください。友人が Evernote をインストールした場合、ctrl + alt + l と Evernote が競合します。
5.css-auto-prefix
CSS プライベート プレフィックスを自動的に追加します。たとえば、変換スタイルを記述した後、-webkit-、-moz- およびその他のスタイルが自動的に追加されます。
構成
次のステップは、ユビキタスな構成です. 参考のために私の構成を投稿します.
File->Preferences->Settings->Workbench->Setting Editor で、エディターの ui を json に変更し、構成を直接貼り付けます。
{
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue",
".jsx",
".tsx"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Monokai",
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.settings.editor": "json",
"editor.tabSize": 2,
//失去焦点后自动保存
"files.autoSave": "onFocusChange",
// #值设置为true时，每次保存的时候自动格式化；
"editor.formatOnSave": true,
// 在使用搜索功能时，将这些文件夹/文件排除在外
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/target": true,
"**/logs": true,
},
// #让vue中的js按"prettier"格式进行格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue组件中html代码格式化样式
"wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
"wrap_line_length": 200,
"end_with_newline": false,
"semi": false,
"singleQuote": true
},
"prettier": {
"semi": false,
"singleQuote": true
}
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
}
复制代码ホットキー
熟練している場合、ショートカット キーを使用すると、コードをより効率的に入力できるようになります。参考までに、私がよく使うショートカットキーをリストアップします。
ctrl + d 选中一个词 鼠标双击也可以
ctrl + f 搜索
ctrl + p 快速打开文件
ctrl + shift + [ 折叠区域代码
ctrl + shift + ] 展开区域代码
ctrl + shift + k 删除一行代码，不过我更喜欢用ctrl+x，因为一只手就可以操作
复制代码