vscode使用小结

前端格式化规范（eslint配置）

1.vscode从插件库里安装eslint、prettier、vetur

1596513070(1).jpg

2. 进入vscode本地配置项

   
   1596512607(1).jpg

3.搜索eslint ,打开settings.json，

1603424162.png

4.附常用配置，粘贴即可

{
  "files.autoSave": "afterDelay",
  "files.trimTrailingWhitespace": true,

  "editor.fontSize":16,
  "editor.formatOnSave": true, // eslint保存格式化
  "editor.codeActionsOnSave": {// 当保存的时候，eslint自动帮我们修复错误
        "source.fixAll": true
  },
  "editor.quickSuggestions": {
      "strings": true
   },
  "editor.detectIndentation": false,  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.tabSize": 4,

  "eslint.autoFixOnSave": true, // #每次保存的时候将代码按eslint格式进行修复
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
          "language": "vue",
          "autoFix": true
      }
   ],  // 添加 vue 支持

  "prettier.eslintIntegration": true,//  #让prettier使用eslint的代码格式进行校验
  "prettier.semi": false,  //  #去掉代码结尾的分号
  "prettier.singleQuote": false, //  #使用单引号替代双引号

  "javascript.format.enable": false, // 不启动JavaScript格式化
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,// #这个按用户自身习惯选择
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.format.options.useTabs": true,
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.options.tabSize": 4,
  "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
          "wrap_attributes": "force-aligned"
          // #vue组件中html代码格式化样式
      },
   "prettier": {
      "semi": false,
      "singleQuote": false,
      "eslintIntegration": true
    }
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行
}

vue项目并一键生成.vue模版

1.插件库中搜索Vetur

2.文件-->首选项-->用户片段-->点击新建代码片段--取名vue.json-> 确定

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<template>",
      "<div>",
      "",
      "</div>",
      "</template>",
      "<script>",
      "export default {",
      "props:{},",
      "components: {},",
      "data() {",
      "return {",
      "",
      "};",
      "},",
      "computed: {},",
      "watch: {},",
      "methods: {",
      "",
      "},",
      "created() {",
      "",
      "},",
      "mounted() {",
      "",
      "},",
      "beforeCreate() {}, // 生命周期 - 创建之前",
      "beforeMount() {}, // 生命周期 - 挂载之前",
      "beforeUpdate() {}, // 生命周期 - 更新之前",
      "updated() {}, // 生命周期 - 更新之后",
      "beforeDestroy() {}, // 生命周期 - 销毁之前",
      "destroyed() {}, // 生命周期 - 销毁完成",
      "activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发",
      "}",
      "</script>",
      "<style lang='scss' scoped>",
      "$4",
      "</style>"
    ],
    "description": "Log output to console"
  }
}

3.输入vue 按键盘的tab就行

设置默认打开浏览器

1.安装open in browser插件
2.选择文件—首选项—设置，在搜索栏输入open-in-browser.default，出现以下在编辑框中编辑,输入Chrome