VS CODE 之常用差价以及代码保存eslin格式化

最新推荐文章于 2024-07-26 11:05:31 发布

易之晓晓

最新推荐文章于 2024-07-26 11:05:31 发布

阅读量1.1k

点赞数

文章标签： VSCOD

本文链接：https://blog.csdn.net/qq_42306443/article/details/86156220

版权

{
  "search.followSymlinks": false,
  //由于prettier不能格式化vue文件template  所以使用js-beautify-html格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    }
  },
  "eslint.autoFixOnSave": true, //保存时使用自动格式化
  "eslint.validate": [ //验证文件类型
    "javascript",
    "javascriptreact",
    "vue",
    "html",
    "jsx",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "prettier.singleQuote": true, //使用单引号而不是双引号
  "prettier.jsxBracketSameLine": true, //将>多行JSX元素放在最后一行的末尾，而不是单独放在下一行
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }, //保存时自动格式化
}

需要安装插件

Beautify Vetur

生成vue模板使用用户代码片段

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "   <div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "components: {},",
            "data() {",
            "return {",
            "",
            "};",
            "},",
            "computed: {},",
            "watch: {},",
            "methods: {",
            "",
            "},",
            "created() {",
            "",
            "},",
            "mounted() {",
            "",
            "},",
            "}",
            "</script>",
            "<style lang='scss' scoped>",
            "$4",
            "</style>"
        ],
        "description": "Log output to console"
    }
}