使用vscode的基本操作

1. 使用的基本插件如下

【Auto Close Tag】
【Auto Rename Tag】
【Bookmarks】 可以用来标记代码的位置
【Chinese (Simplified) Language Pack for Visual Studio Code】汉化vscode
【ESLint】
【GitLens — Git supercharged】 使用git相关操作
【Import Cost】 显示引用的文件大小
【Prettier-Standard - JavaScript formatter】 代码格式化
【Vetur】 美化vue
【JavaScript (ES6) code snippets】提供一些es6的快捷操作
【Quokka.js】编辑器中的原型平台，马上可以看到运行结果
【CSS Peek】通过类定位到对应的样式
【REST Client】在vscode上面进行http请求

2. 设置默认格式化

• 在工作区点击右键
• 选择配置默认格式化程序，选择 Prettier-Standard - JavaScript formatter

3. 设置保存时格式化 setting.json的设置如下

{
    "[javascript]": {
        "editor.defaultFormatter": "numso.prettier-standard-vscode"
    },
     "[vue]": {
        "editor.defaultFormatter": "numso.prettier-standard-vscode"
    },
    "editor.formatOnSave": true, // 保存时格式化
    "git.enableSmartCommit": true, // 默认生成
    "eslint.codeAction.showDocumentation": {
        "enable": true
    }
}

4. 设置eslint有效 在工作栏的下面蓝色区域进行设置

5. 设置.eslintrc.js 对于vue2.x的项目，要想eslint有提示作用，还需要设置 .eslintrc.js 里面的 extends，添加 @vue/standard，这样当vue内容格式不对的时候就会提示

module.exports = {
  ...
  extends: ['plugin:vue/essential', '@vue/standard'],
  ...
}

提示效果如下

注意：在vue3的项目里面，上面的设置没有效果，输入多的分号不会提示，暂时没有找到好的方法。