vscode 開發(fā)工具指南之你所不知道的強悍功能

介紹Visual studio code的用法,結合實際開發(fā)需要,突出介紹一些強悍技能。無論是MacBook 還是Windows用戶,它都能夠實現(xiàn)快速文本編輯和markdown編寫,讓文本編輯進入高效模式。

1. 公共篇

1.1 云備份配置,一個json文件搞定

{

? ? "workbench.colorTheme": "Quiet Light",

? ? "workbench.startupEditor": "newUntitledFile",

? ? "workbench.iconTheme": "vscode-icons",

? ? "workbench.editor.enablePreview": false, //不使用預覽打開

? ? // 避免每次窗口都被覆蓋

? ? "window.openFoldersInNewWindow": "on",

? ? "window.restoreWindows": "none",

? ? "files.autoSave": "afterDelay",

? ? "files.autoSaveDelay": 60000,

? ? // "security.workspace.trust.untrustedFiles": "open",

? ? "security.workspace.trust.enabled": false,


? //前端相關

? ? "[vue]": { //vuejs 格式化問題

? ? ? ? "editor.defaultFormatter": "octref.vetur"

? ? },

? ? "vetur.format.defaultFormatter.html": "js-beautify-html",

? ? "vetur.format.defaultFormatter.js": "prettier",

? ? "vetur.format.defaultFormatterOptions": {

? ? ? ? "js-beautify-html": {

? ? ? ? ? ? "wrap-attributes": "aligned-multiple",

? ? ? ? ? ? "wrap-attributes-indent-size": 4,

? ? ? ? ? ? "wrap-line-length": 150,

? ? ? ? ? ? "indent_size": 2, //兩個空格位置

? ? ? ? },

? ? ? ? "prettier": {

? ? ? ? ? ? "tabWidth": 2, //兩個空格位置

? ? ? ? ? ? "printWidth": 200,

? ? ? ? ? ? "singleQuote": false,

? ? ? ? ? ? "jsxBracketSameLine": true,

? ? ? ? },

? ? },

? ? "[javascript]": {? ? //JavaScript 格式化問題

? ? ? ? "editor.defaultFormatter": "HookyQR.beautify"

? ? },

? ? "[json]": {

? ? ? ? "editor.defaultFormatter": "HookyQR.beautify"

? ? },

? ? "editor.tabSize": 4,

? ? "editor.fontSize": 13,

? ? "editor.wordWrap":"wordWrapColumn",

? ? "editor.wordWrapColumn": 160,

? ? "editor.suggestSelection": "first",

? ? "editor.quickSuggestions": {

? ? ? ? "strings": true

? ? },

? ? //java 相關

? ? "java.home": "D:\\Program Files\\java\\jdk1.8.0_191",

? ? "java.semanticHighlighting.enabled": true,

? ? "java.configuration.maven.userSettings": "D:\\ProgramData\\apache-maven-3.5.4\\conf\\settings-admin.xml",

? ? "maven.executable.path": "D:\\ProgramData\\apache-maven-3.5.4\\bin\\mvn.cmd",

? ? "maven.excludedFolders": [

? ? ? ? "**/.*",

? ? ? ? "**/node_modules",

? ? ? ? "**/target",

? ? ? ? "**/bin"

? ? ],

? ? "files.exclude": {

? ? ? ? "**/.classpath": true,

? ? ? ? "**/.project": true,

? ? ? ? "**/.settings": true,

? ? ? ? "**/.factorypath": true

? ? },

? ? /*? 未知配置**/

? ? "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

? ? "prettier.tabWidth": 4,

? ? "prettier.eslintIntegration": true,

? ? "eslint.migration.2_x": "off",

? "eslint.autoFixOnSave": true,

? ? "eslint.validate": [

? ? ? ? "javascript",

? ? ? ? "javascriptreact",

? ? ? ? "html",

? ? ? ? {"language": "vue", "autoFix": true}

? ? ],

? ? "eslint.options": {

? ? ? ? //"configFile": "E:/git/github/styleguide/eslint/.eslintrc.js",

? ? ? ? "plugins": ["html"]

? ? },

}

1.2 列編輯

Windows: alt+shift

mac: option + shift

1.3 類似notepad++,遞增插入

1.3.1 安裝插件 Insert Numbers

Windows: control + alt + n

mac: command + option + n


1.3.2 橫向多列插入

windows: 按下 alt 選擇 多列

mac:按下option 選擇? 多列


1.4 csv 和 markdown 查看工具

? 1.4.1 你還在為,wps 或者 office中,自動轉換 文本為數(shù)字煩惱嗎?

1.4.2 你還在拼命尋找一款免費的markdown編輯器?

1.5 命令區(qū)

1.5.1 大小寫轉換

1.5.2 排序

1.5.3 合并行

2. 前端篇

2.1 安裝vetur插件


2.2 你還在煩惱沒有找到 npm 腳本嗎,看這里


2.3 前端開發(fā)配置參考

? //前端相關

? ? "[vue]": { //vuejs 格式化問題

? ? ? ? "editor.defaultFormatter": "octref.vetur"

? ? },

? ? "vetur.format.defaultFormatter.html": "js-beautify-html",

? ? "vetur.format.defaultFormatter.js": "prettier",

? ? "vetur.format.defaultFormatterOptions": {

? ? ? ? "js-beautify-html": {

? ? ? ? ? ? "wrap-attributes": "aligned-multiple",

? ? ? ? ? ? "wrap-attributes-indent-size": 4,

? ? ? ? ? ? "wrap-line-length": 150,

? ? ? ? ? ? "indent_size": 2, //兩個空格位置

? ? ? ? },

? ? ? ? "prettier": {

? ? ? ? ? ? "tabWidth": 2, //兩個空格位置

? ? ? ? ? ? "printWidth": 200,

? ? ? ? ? ? "singleQuote": false,

? ? ? ? ? ? "jsxBracketSameLine": true,

? ? ? ? },

? ? },

? ? "[javascript]": {? ? //JavaScript 格式化問題

? ? ? ? "editor.defaultFormatter": "HookyQR.beautify"

? ? },

? ? "[json]": {

? ? ? ? "editor.defaultFormatter": "HookyQR.beautify"

? ? },

? ? "editor.tabSize": 4,

? ? "editor.fontSize": 13,

? ? "editor.wordWrap":"wordWrapColumn",

? ? "editor.wordWrapColumn": 160,

? ? "editor.suggestSelection": "first",

? ? "editor.quickSuggestions": {

? ? ? ? "strings": true

? ? },

3. 后端篇

3.1 遠程開發(fā)(你還在為vim,操作不便煩惱嗎?)

3.1.1 安裝 Remote Development 插件包


3.1.2 按照步驟連接終端


3.1.3. 編輯文件


若有收獲,就點個贊吧~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容