VsCode 配置Eslint格式化代码（vue）以及常用插件

jollywing 发布于2019-08-29 15:20 / 2744人阅读

摘要：配置插件扩展商店搜索，点击安装，并重新加载配置，打开文件首选项设置在用户设置中插入配置代码支持此时，就可以在项目中检测代码了检测比较严格，若希望按照格式化代码，进行以下操作安装插件，这是上一个代码提示，语法高亮等功能的流行插件安装后在默认配

配置eslint

插件扩展商店搜索 eslint，点击安装，并重新加载；

配置eslint，打开文件==>首选项==>设置；

在用户设置中插入配置代码(支持vue):

    "eslint.options": {
        "plugins": [
            "html"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
     "editor.tabSize": 2,

此时，eslint就可以在项目中检测代码了

eslint检测比较严格，若希望vue按照eslint格式化代码，进行以下操作：

安装插件Vetur，这是vscode上一个vue.js代码提示，语法高亮等功能的流行插件；

安装后在默认配置可以看到，vetur默认采用prettier格式化；

安装插件prettier,但他的格式化并不和eslint一样，所以在用户配置中添加以下配置；

//分号
"prettier.semi": false,
//单引号包裹字符串
"prettier.singleQuote": true,
//html格式化依赖  默认为none
"vetur.format.defaultFormatter.html": "js-beautify-html",
//函数前加空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
//没有下边这个 上边不生效
"vetur.format.defaultFormatter.js": "vscode-typescript",

vue扩展推荐

Vue VSCode Snippets

Vue 2 Snippets

上面是两个很好用的vue代码片段

Better Comments 高亮你注释的扩展比如：

css peek css转到定义

file peek file到定义

服务器托管私有云 vue插件服务器配置以及价格腾讯云创建服务器以及配置配置云服务器以及网站上线

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113255.html

VsCode 配置Eslint格式化代码（vue）以及常用插件

摘要：配置插件扩展商店搜索，点击安装，并重新加载配置，打开文件首选项设置在用户设置中插入配置代码支持此时，就可以在项目中检测代码了检测比较严格，若希望按照格式化代码，进行以下操作安装插件，这是上一个代码提示，语法高亮等功能的流行插件安装后在默认配配置eslint 插件扩展商店搜索 eslint，点击安装，并重新加载；showImg(https://segmentfault.com/img...

laznrbfe 2019-08-22 17:05 评论0 收藏0
VsCode 配置Eslint格式化代码（vue）以及常用插件

摘要：配置插件扩展商店搜索，点击安装，并重新加载配置，打开文件首选项设置在用户设置中插入配置代码支持此时，就可以在项目中检测代码了检测比较严格，若希望按照格式化代码，进行以下操作安装插件，这是上一个代码提示，语法高亮等功能的流行插件安装后在默认配配置eslint 插件扩展商店搜索 eslint，点击安装，并重新加载；showImg(https://segmentfault.com/img...

sean 2019-08-02 10:23 评论0 收藏0
梳理前端开发使用eslint-prettier检查和格式化代码

摘要：梳理前端开发使用检查和格式化代码问题痛点在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。使用格式化所有代码。参考文档如何花分钟解决产生的各种错误的记忆现场原文转载梳理前端开发使用检查和格式化代码线上猛如虎，线下怂如鼠梳理前端开发使用eslint-prettier检查和格式化代码问题痛点在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。因此编...

yangrd 2019-08-22 17:01 评论0 收藏0
vscode常用插件【全了】

摘要：插件集待补充。。。同时，它还包含了用于转换为格式和生成数据模式的选项用于压缩合并和文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为文件的选项。修改文本的更多命名格式，包括驼峰命名下划线分隔命名，命名以及命名等切换漂亮的主题插件集待补充。。。 20180903 文件【Path Intellisense】自动补全路径浏览器【Open-In-Browser】在...

kyanag 2019-08-30 13:57 评论0 收藏0
vscode常用插件【全了】

摘要：插件集待补充。。。同时，它还包含了用于转换为格式和生成数据模式的选项用于压缩合并和文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为文件的选项。修改文本的更多命名格式，包括驼峰命名下划线分隔命名，命名以及命名等切换漂亮的主题插件集待补充。。。 20180903 文件【Path Intellisense】自动补全路径浏览器【Open-In-Browser】在...

xcc3641 2019-08-26 11:42 评论0 收藏0