放弃webstrom转战vscode

本来是webstrom的忠实用户,无奈webstrom要么需要在网上找一个破解版或者不断的去找激活码,且破解版和激活码的文章总是很多,但是要找到真正有效的却总是要花费不少功夫。终于忍无可忍,转战vscode。(注:文中快捷键是windows快捷键,Mac电脑快捷键将Ctrl换成command即可!)

一、软件下载

软件下载vscode是免费的,直接去官网下载即可。

放弃webstrom转战vscode_第1张图片

二、vscode基本设置

vscode支持选择配置,也支持编辑setting.json文件修改默认配置。setting.json配置的好处是方便快捷,一个团队如果都用相同的setting.json,代码设置基本可以保持一致,方便管理和开发。

1、vscode选择配置

Code -> Preferences ->Settings

放弃webstrom转战vscode_第2张图片

2、vscode编辑setting.json文件修改默认配置

但,如何打开配置代码?如上图的操作,Code ->Preferences ->Settings,打开设置洁面在设置界面搜索workbench.settings.editor,选中json即可改成json设置;然后重新打开设置。

放弃webstrom转战vscode_第3张图片

以下是我的个人配置,仅供参考:

{
    "files.associations": {
    "*.vue": "vue",
    "*.wpy": "vue",
    "*.wxml": "html",
    "*.wxss": "css"
    },
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
    "git.enableSmartCommit": true,
    "git.autofetch": true,
    "emmet.triggerExpansionOnTab": true,
    "emmet.showAbbreviationSuggestions": true,
    "emmet.showExpandedAbbreviation": "always",
    "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
    "wpy": "html"
    },
    //主题颜色 
    //"workbench.colorTheme": "Monokai",
    "git.confirmSync": false,
    "explorer.confirmDelete": false,
    "editor.fontSize": 14,
    "window.zoomLevel": 1,
    "editor.wordWrap": "on",
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 2,
    //失去焦点后自动保存
    "files.autoSave": "onFocusChange",
    // 自动格式化代码
    "editor.formatOnType": true,
    // #值设置为true时,每次保存的时候自动格式化;
    "editor.formatOnSave": true,
     //每120行就显示一条线
    "editor.rulers": [
    ],
    // 在使用搜索功能时,将这些文件夹/文件排除在外
    "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
        }
    },
    "update.mode": "none",
    "editor.suggest.snippetsPreventQuickSuggestions": true,
    "editor.language.brackets": [

    ],
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbench.settings.editor": "json"
  }
3、禁用自动更新

Code ->Preferences ->Settings,打开设置洁面在设置界面搜索update mode并将设置更改为none。

放弃webstrom转战vscode_第4张图片

4、开启代码提示设置

Code ->Preferences ->Settings,打开设置洁面在设置界面搜索prevent并取消勾选

放弃webstrom转战vscode_第5张图片

三、必备插件

在输入框中输入想要安装的插件名称,点击安装即可。

放弃webstrom转战vscode_第6张图片

1、vscode-icons

可以改变编辑器里面的文件图标

放弃webstrom转战vscode_第7张图片

2、Chinese(Simplified)

此中文(简体)语言包为 VS Code 提供本地化界面。

放弃webstrom转战vscode_第8张图片

3、Auto Rename Tag

自动修改匹配的HTML标签

放弃webstrom转战vscode_第9张图片

4、Path Intellisense

智能路径提示,可以在你输入文件路径时智能提示。

放弃webstrom转战vscode_第10张图片

5、stylelint

CSS / SCSS / Less 语法检查

放弃webstrom转战vscode_第11张图片

6、Import Cost

引入包大小计算

放弃webstrom转战vscode_第12张图片

7、Prettier

代码格式化插件,可以配置prettier.config.js文件,配合eslint、git hooks 一起使用,提升项目代码的规范性

放弃webstrom转战vscode_第13张图片

8、vetur

Vue语法高亮、智能感知、Emmet等

放弃webstrom转战vscode_第14张图片

9、VueHelper

Vue,Vue-router和Vuex的代码片段

放弃webstrom转战vscode_第15张图片

10、Vue Language Features (Volar)

v1.8.13 开发vue2的时候使用vetur 帮我们提供良好的代码智能提示

放弃webstrom转战vscode_第16张图片

11、GitLens

详细的 Git 提交日志,哪一行代码,何时、何人提交都有记录。

放弃webstrom转战vscode_第17张图片

四、vscode基本快捷键

以下快捷键中windows为Ctrl,mac的快捷键将Ctrl换成Command,alt换成option
向下复制一行:shift + alt + ↓
向上复制一行;shift + alt + ↑
搜索:ctrl + f
替换:ctrl + alt + f
在项目内搜索:ctrl + shift + f
快速打开最近打开的文件:Ctrl+P

参考文章: https://zhuanlan.zhihu.com/p/113222681

https://zhuanlan.zhihu.com/p/133414551

你可能感兴趣的:(前端,vscode)