vscode开发vue插件推荐及eslint配置

目录

 

一、vscode 开发vue插件

二、关于snippets配置

三、snippets可以使用的一些变量

四、Eslint设置

---

一、vscode 开发vue插件

1. Vetur 语法高亮、智能感知
2. Vscode-icons 目录树图标
3. Auto Close 自动添加HTML / XML关闭标签
4. Beautify 格式化javascript，JSON，CSS，Sass，和HTM
5. One Dark Pro 代码主题颜色（有好多可以自己去查）
6. open in browser 

   This allows you to open the current file in your default browser or application.

7. Vue Peek  按F12或ctrl再单击可以跳转到标签对应组件内容中

8. vue-helper

二、关于snippets配置

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!--",
            "******************************************************************",
            "  ",
            "    Copyright (c) 2020—2020 ABC.Co.Ltd. All rights reserved.",
            "",
            "Author: HuanHuanZi",
            "Date:   $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
            "Description:",
            "",
            "******************************************************************",
            " -->",
            "<template>",
            "  <div class=''>",
            "  </div>",
            "</template>",
            "",
            "<script>",
            "  export default {",
            "    name: '$0',",
            "    data() {",
            "      return {",
            "                ",
            "      }",
            "    },",
            "    components: {},  ",
            "    computed: {},  ",
            "    methods: {}",
            "  }",
            "</script>",
            "",
            "<style scoped>",
            "",
            "</style>",
            "",
        ],
        "description": "My Vue Custom Style"
    }
}

三、snippets可以使用的一些变量

The following variables can be used:

    TM_SELECTED_TEXT The currently selected text or the empty string
    TM_CURRENT_LINE The contents of the current line
    TM_CURRENT_WORD The contents of the word under cursor or the empty string
    TM_LINE_INDEX The zero-index based line number
    TM_LINE_NUMBER The one-index based line number
    TM_FILENAME The filename of the current document
    TM_FILENAME_BASE The filename of the current document without its extensions
    TM_DIRECTORY The directory of the current document
    TM_FILEPATH The full file path of the current document
    CLIPBOARD The contents of your clipboard
    WORKSPACE_NAME The name of the opened workspace or folder

For inserting the current date and time:

    CURRENT_YEAR The current year
    CURRENT_YEAR_SHORT The current year’s last two digits
    CURRENT_MONTH The month as two digits (example ‘02’)
    CURRENT_MONTH_NAME The full name of the month (example ‘July’)
    CURRENT_MONTH_NAME_SHORT The short name of the month (example ‘Jul’)
    CURRENT_DATE The day of the month
    CURRENT_DAY_NAME The name of day (example ‘Monday’)
    CURRENT_DAY_NAME_SHORT The short name of the day (example ‘Mon’)
    CURRENT_HOUR The current hour in 24-hour clock format
    CURRENT_MINUTE The current minute
    CURRENT_SECOND The current second

For inserting line or block comments, honoring the current language:

    BLOCK_COMMENT_START Example output: in PHP /* or in HTML <!–
    BLOCK_COMMENT_END Example output: in PHP */ or in HTML -->
    LINE_COMMENT Example output: in PHP // or in HTML <!-- -->

四、Eslint设置

4.1、需要安装插件Manta's Stylus Supremacy

4.2、将以下内容拷贝纸setting.json中 ，文件中直接ctrl+s保存即可自动修复eslint报错。

File->Preferences->settings

// vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 2,
    // #每次保存的时候自动格式化 
    "editor.formatOnSave": true,
    // #每次保存的时候将代码按eslint格式进行修复
    "eslint.autoFixOnSave": true,
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //  #让prettier使用eslint的代码格式进行校验 
    "prettier.eslintIntegration": true,
    //  #去掉代码结尾的分号 
    "prettier.semi": false,
    //  #使用带引号替代双引号 
    "prettier.singleQuote": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #这个按用户自身习惯选择 
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按编辑器自带的ts格式进行格式化 
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
    },
    // 格式化stylus, 需安装Manta's Stylus Supremacy插件
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分好
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行