【前端开发日记 】VSCODE被初始化之后重新设置的这些事

• 不知到什么插件的原因，导致我的vscode编辑器，在输入比如div的时候按tab不会识别成html标签，在设置了推荐词之后还是不好使，于是初始化了自己的编辑器设置 ，导致所有的插件和个性化设置都不见了

  • 参考设置过程参考文章
  • 虽然插件被弄没了，但是确实再重新配置之后很快就可以自动补全了，这里记录一下从头配置Vscode的记录

• 首先设置.vue文件的单词补全功能

  • 
    
    

  • ctrl + shift + p打开设置，找到text editor中的suggestions 下面的 files associations

  • 添加*.vue value是html

  • 即可对vue文件自动补全

• 安装vetur和eslint

  • 这两个一个是用来vue项目语法提示，另一个是用来代码格式化，所以都是最基础的

  • 选中插件 搜索对应的插件点击install即可安装，部分插件需要重启生效，直接在插件界面可以点击重启

    
    
    

• 设置vscode为中文

  • ctrl + shift + p打开全局搜索

  • 输入luanguage,选择configuration display language

  • 选择install addition language

  • 在左侧插件栏，选择chinese的插件进行安装

  • 安装之后右下角会有个重启提示

    • 
      
      

  • 点击重启

• 关闭vscode自带的git功能

  • 由于我平时都是使用sourceTree进行代码管理，所以vscode自带的git功能我不怎么用，同时我的电脑性能十分有限，所以每次不需要的时候我会把这个功能关掉，不然会占用挺多的内存
  • ctrl + shift + p 输入setting 打开全局设置（或者在文件 首选项 打开设置)
  • 找到git:enabled把该项设置勾取消掉,即关闭了vscode自带的git
  • 
    
    

• 保存时自动按照eslint规范格式化代码，.vue文件和.html文件

  • 前提条件，首先要保证已经安装了eslint这个插件
  • 打开首选项ctrl + shift + p以json格式打开首选项设置
  • 在文件中添加如下设置

    "editor.tabSize": 2,
        "eslint.autoFixOnSave": true,
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        },
        "eslint.validate":
            [
                //开启对.vue文件中错误的检查
                "javascript",
                "javascriptreact",
                {
                    "language": "html",
                    "autoFix": true
                },
                {
                    "language": "vue",
                    "autoFix": true
                }
            ]