vscode-配置一些功能提升前端开发效率

1: 新建文件并初始化开发模版

以vue项目为例其他项目步骤相同
第一步：打开VS Code编辑器，依次选择“文件 -> 首选项 -> 用户代码片段”，此时，会弹出一个搜索框，我们输入vue，选择vue.json

---

第二步：复制下面的代码覆盖进入该json文件

{
    // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
        "Print to console": {
            "prefix": "vue",
            "body": [
                "<!-- UI地址: $1 -->",
                "<!-- 需求地址: $2 -->",
                "<!-- 页面描述: $2 -->",
                "<!-- 开发者: @yourName-->",
                "<template>",
                "    <div id=''></div>",
                "</template>",
                "",
                "<script>",
                "export default {",
                "  name: '',",
                "  data() {",
                "    return {",
                "",
                "    }",
                "  },",
                "  watch: {},",
                "  computed: {},",
                "  components: {",
                "  },",
                "  beforeCreate() {},",
                "  created() {},",
                "  beforeMount() {},",
                "  mounted() {",
                "  },",
                "  methods: {",
                "  },",
                "  beforeUpdate() {},",
                "  updated() {},",
                "  beforeDestroy() {},",
                "  destroyed() {}",
                "}",
                "</script>",
                "",
                "<style scoped lang='less'>",
                "@import url('./style.less');",
                "</style>",
                ""
            ],
            "description": "Vue模板"
        }
}

---

第三步：保存该文件，然后新建.vue文件 ，在文件中键入vue，vscode会自动关联我们刚刚设置的文件中的内容，然后回车选中，该模版就自动填充进来了

image.png
image.png
ps：模版中可能有一些错误或不符合你自己项目的地方，你可以自己调整一下

---

2: setting for vue develpoer

该项主要以vue项目开发者角度配置，里面的配置可以按照我的备注与自己的理解来做相应的调整
第一步
点击右下角的齿轮⚙️，然后再点击设置打开设置界面

设置
然后点击右上角这个小图标
转换成json文件编辑
然后会出来一个编辑json的界面，把下面的json粘贴上去

// 复制粘贴后注意要把注释都删了以保证json文件格式正确，才能使配置生效
{
    "terminal.integrated.shell.osx": "/bin/zsh", // 设置可以给vscode使用的默认的cmd程序
    "vetur.format.options.tabSize": 2, // 用vetur格式化代码时一个tab等于2个空格
    "vetur.format.defaultFormatter.js": "none", // 用vetur格式化代码的时候js部分格式化方式为none
    "vetur.format.defaultFormatter.html": "js-beautify-html",// 用vetur格式化代码的时候html部分格式化方式为js-beautify-html
    "vetur.format.defaultFormatterOptions": { // 一些别的vetur格式化代码参数
        "js-beautify-html": { // 用js-beautify-html规则格式化html的时候使用以下配置
            "wrap_line_length":300, // 参数/属性换行长度设置为300
            "wrap_attributes": "auto",// 参数/属性是否换行设置为auto
            "end_with_newline": false // 不清楚啥意思，求补充
        }
    },
    "eslint.format.enable": true, // 自动使用eslint格式化代码风格（1⃣️见下面ps）
    "eslint.validate": [ // 针对vue代码风格格式化的配置
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "editor.formatOnSave": true, // 在保存的时候自动格式化代码风格
    "editor.codeActionsOnSave": { // 保存的时候自动修复代码中的爆红处
        "source.fixAll.eslint": true
    }
}

1⃣️ps： eslint这个是格式化代码风格，比如说你的代码中的双引号啥的要不要编程单引号，分号是否要删掉这样的格式化处理，跟上面vetur格式化文档格式不是一个东西，别搞混概念了
*ps：注意自己可以按照自己的开发习惯来设置哪些功能的开关；
以上，有错误的地方欢迎大佬指出，能给后人乘个凉😘

3： updateing