【vscode软件安装配置vue和react】

1. vscode设置成中文

安装应用：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

2. 识别.vue文件

安装应用：vetur

3. 一键生成react代码块以及快速补全react代码

一键生成react代码块以及快速补全react代码

4. 右键.html文件Open With Live Server

打开带端口的页面，样式回会和正式环境一致
安装应用：Live Server

5. html代码自动补全

vscode自带应用：Emmet

链接: Emmet语法

6. vscode用户设置

• 常用配置项：

  （1）editor.fontsize用来设置字体大小，可以设置editor.fontsize : 14;

  （2）files.autoSave这个属性是表示文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自动保存。

  （3）editor.tabCompletion用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值，推荐设置为on;

  （4）editor.codeActionsOnSave中的source.organizeImports属性，这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列，推荐设置为true,即"editor.codeActionsOnSave": { “source.organizeImports”: true }；

  （5）editor.lineNumbers设置代码行号,即editor.lineNumbers ：true；

• 文件–首选项–设置，打开用户设置。setting.json文件修改默认配置。

{
    "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,//启用vscode自带的Emmet自动补全
    "emmet.showAbbreviationSuggestions": true,//显示缩写建议
    "emmet.showExpandedAbbreviation": "always",//显示扩展的缩写
    "emmet.includeLanguages": {
        "vue-html": "vue",
        "vue": "vue",
        "wpy": "html",
        //react-js文件使用标签补全
        "javascript": "javascriptreact"
    },
    //主题颜色 
    //"workbench.colorTheme": "Monokai",
    "git.confirmSync": false,
    "explorer.confirmDelete": false,
    "editor.fontSize": 14,
    "window.zoomLevel": 0,
    "editor.wordWrap": "on",
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 2,
    //失去焦点后自动保存
    "files.autoSave": "afterDelay",
    // #值设置为true时，每次保存的时候自动格式化；
    "editor.formatOnSave": false,
    //每120行就显示一条线
    "editor.rulers": [],
    // 在使用搜索功能时，将这些文件夹/文件排除在外
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/target": true,
        "**/logs": true,
    },
    // 这些文件将不会显示在工作空间中
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/*.js": {
            "when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中
        },
        "**/node_modules": 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
        }
    },
}

7. vscode复制相对路径时是反斜杠\，改为正斜杠/

vscode复制相对路径时是反斜杠\，改为正斜杠/