vscode 开发工具指南之你所不知道的强悍功能

  • Post author:
  • Post category:其他

28565dd6822c4e97921f8de5cc794a8d.png

介绍Visual studio code的用法,结合实际开发需要,突出介绍一些强悍技能。无论是MacBook 还是Windows用户,它都能够实现快速文本编辑和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

602a59bbf1d7b05d05862fbae2e5b5b4.png

1.3 类似notepad++,递增插入

1.3.1 安装插件 Insert Numbers

Windows: control + alt + n
mac: command + option + n

48d68ed02e8b999e77591c4b21cba4c3.png

1.3.2 横向多列插入

windows: 按下 alt 选择 多列
mac:按下option 选择  多列

e1b223547f8ca51aaf518076e5bdd14a.png

3b76b36064752a0bc285dac4f54305c8.png

1.4 csv 和 markdown 查看工具

1.4.1 你还在为,wps 或者 office中,自动转换 文本为数字烦恼吗?

26c3dd911f6713ea4df46a42cd90be13.png

568b560e462b171b6222801541cf7f57.png

24db5639e40056919a531047f71a39f4.png

8cf50efd7d6af726aa1ee769a7013c86.png

1.4.2 你还在拼命寻找一款免费的markdown编辑器?

d344ce0d682edecdef171397aad36e01.png

1.5 命令区

3976ac2a61ca86b6e19e5fd3d2cdf33d.png

1.5.1 大小写转换

df6c2d5f6b4feefed4caf35a13c67d12.png

1.5.2 排序

c3177ba9e6346c7a3cb7eb399d011395.png

1.5.3 合并行

aa51de6e31d61a53b7b57d3308b9ebc0.png

183a0615cab4593a567da1c70346d554.png

2333d84325f64ddb75d74b5819135448.png


2. 前端篇

2.1 安装vetur插件

3e8746433c5f92bf277ba4cfd9a270f0.png

2.2 你还在烦恼没有找到 npm 脚本吗,看这里

e773c5b6bf8262f97f14a630f4c22a56.png

2.3 前端开发配置参考

  	//前端相关
    "[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 远程开发(你还在为vim,操作不便烦恼吗?)

3.1.1 安装 Remote Development 插件包

b56b5190a4c38f1eecf7d03c0c67ba01.png

3.1.2 按照步骤连接终端

0285eebb43db8d6d45b0c97933d6dd7f.png

ac0a2e39205fef909625acabc0265fdc.png

10d81357c81b8453357608a4d1f1af91.png

3.1.3. 编辑文件

d635dac35d147e6be09f986cad72a86d.png

6cf1d110be06dcfa04fee0c69ba23cf6.png

a7da38e363ba74955f779ae9cb5a9be1.png

73885bd8c185b75ff45bab2a4f7d9c66.png

a3fa952a614b2a8e389b85f4a7f20739.png

若有收获,就点个赞吧~


版权声明:本文为weixin_43805705原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。