[详细教程安装][配置] VsCode中关于Eslint的辅助插件_都别急的博客-程序员ITS301

技术标签: vscode  前端  vue.js  前端学习  

1.Eslint

 安装完成后打开settings.json

进行配置:

 "editor.codeActionsOnSave": {
        "source.fixAll": true
    }

 

 2.Prettier

在settings.json中加入以下配置

"eslint.alwaysShowStatus": true,
    "prettier.trailingComma": "none",
    "prettier.semi" : false,
    //每行文字个数超出此限制将会被迫换行
    "prettier.printWidth": 300,
    //使用单引号替换双引号
    "prettier.singleQuote": true,
    "prettier.arrowParens": "avoid",
    //设置.vue文件中,HTML代码的格式化插件
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.ignoreProjectWarning": true,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
        "trailingComma": "none",
        "semi": false,
        "singleQuote": true,
        "arrowParens": "avoid",
        "printWidth": 300
        },
        "js-beautify-html" : {
            "wrap_attributes": false
        }
    },

 在C:\\Users/你自己的用户名文件夹下创建一个文件.prettier 。新建记事本重命名就可以

 用记事本打开配置.prettier,把下面的配置粘进去:

{
    // 使能每一种语言默认格式化规则
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

    /*  prettier的配置 */
    "prettier.printWidth": 120, // 超过最大值换行
    "prettier.tabWidth": 2, // 缩进字节数
    "prettier.useTabs": false, // 缩进不使用tab,使用空格
    "prettier.semi": true, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
    "prettier.bracketSpacing": true, // 在对象,数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.disableLanguages": ["vue"], // 不格式化vue文件,vue文件的格式化单独设置
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器,默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
    "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
    "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
}

保存后关闭.prettier文件。

回到settings.json,写入自己的路径

3.最后在.vue和.js文件代码空白处右键,使用...格式化文档

点击【配置默认格式化程序】选择 Prettier-Code formatter

 4.进行测试

打开一个.vue 文件,随便把文件格式打乱例如:

 Ctrl+S保存,可以看到自动修复了

 JS 也一样,千万别忘了第3步修改   使用...格式化文档,不然没作用

 Ctrl+S保存

成功

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yyzx_yyzx/article/details/125708717

智能推荐

AndroVM 可以让你在虚拟机环境中运行 Android_victoryckl的博客-程序员ITS301_androvm

http://wenku.baidu.com/view/f4dbda84a0116c175f0e480f.html androVM是专为虚拟机运行安卓系统的开发项目,与普通的android x86相比做了很多优化,官网http://androvm.org/ ,而且提供虚拟机下载,有兴趣的可以关注一下virtualbox 下跑 android x86一顿一顿的,兼容性也很烂,看看这个

Solr&SpringDataSolr_Joker_DJ dear的博客-程序员ITS301

Solr什么是SolrSolr安装中文分词器域的分类什么是域域的分类:域的常用属性普通域复制域动态域solrjSpring Data SolrSpring Data Solr入门什么是Solr直接使用sql搜索存在的问题大多数搜索引擎应用都必须具有某种搜索功能搜索功能往往是巨大的资源消耗它们由于沉重的数据库加载而拖垮你的应用的性能所有我们一般在做搜索的时候 会把它单独转移到一个外部的搜索服务器当中进行Apache Solr是一个流行的开源搜索服务器Apache SolrSolr是一个

php select循环输出,怎么循环追加打印罗列出多个select出来的结果_茸茸君的博客-程序员ITS301

首先:$names = array("关键词1","关键词2","关键词3");然后依次对关键字进行select查询,再打印出来。下面的程序只能打印最后依次关键字3的结果。求帮忙解决下。O(∩_∩)O谢谢for($i=0; $i $query="SELECT * from te where title like \"$names[$i]\"";[email protected]_query($query...

app安全_安卓阿哲的博客-程序员ITS301_代码中应添加app运行前的环境检测代码来保障运行环境安全,防止在不安全的环境(roo

五大反逆向技术:代码混淆、针对不同逆向工具保护技术、增加逆向难度(java代码native化)、动态加载技术、代码验证技术代码混淆:工具:proguard常用操作:保留选项、压缩、优化、混淆。功能:混淆代码(注意使用混淆文件的时候需加入自己的具体操作以防程序无法运行)删除无用Log:可删除调试和分析代码逻辑时的log,也可删除不使用的调试接口和测试环境问题:混淆...

跟着团子学SAP PS:增补订单及分配订单_SAP团子的博客-程序员ITS301

项目预算中非常细微但却无比重要的配置—增补订单/分配订单

elasticsearch update 无结果_AI视觉网奇的博客-程序员ITS301

 这个一直不能用:for id in data_front: res=es.update(index=index, doc_type=doc_type, id=id, body={"doc": {"flag":0}}) print(id,res) break {'total': 0, 'successful'...

随便推点

Oracle RAC ASM 实例 从10.2.0.1 升级到 10.2.0.4 说明_iteye_8171的博客-程序员ITS301

一. 说明在官网看到一篇ASM 升级的文档,如下: How To Upgrade ASM from 10.2 to 11.1 (RAC) http://blog.csdn.net/tianlesoftware/archive/2011/04/25/6362083.aspx Unable To Open Database After ASM Upgrade From Re...

Mysql配置文件(my.ini|my.cnf)配置项详解_忠忠的博客-程序员ITS301_mysql配置文件详解

#[client]#MySQL默认密码#password=88888888[mysqld]#MySQL以什么用户运行#user=mysql#MySQL运行在哪个端口#port=3306#改参数指定了安装MySQL的安装路径,填写全路径可以解决相对路径所造成的问题#basedir#指定MySQL的数据库文件放在什么路径下datadir=/usr/local/mysql/data#mysql以socket方式运行的sock文件位置socket=/usr/local/mysql/mys.

Weex搭建开发环境_史慧君的博客-程序员ITS301_weex 搭建开发环境

项目需要, 需要构建Weex项目, 用于打包Android和IOS版本, 所以目前需要搭建一个demo, 来测试打包工作;本文地址:https://blog.csdn.net/junzaivip/article/details/801183251. 配置Weex环境, 全局安装 weex-toolkit : npm install weex-toolkit -g注意: 如果报错, 是因为npm版本...

ios系统python编译器_【Mac + Appium + Python3.6学习(三)】之IOS自动化测试环境配置_weixin_39700215的博客-程序员ITS301

一、安装IOS自动化测试环境配置环境:Appium version :1.9.1Appium-desktop:1.7.1Xcode:10.0iPhone5S:IOS(10.3.3)Mac:10.13.61、安装类库①安装Homebrew、npm参考我的另一篇文章:②安装依赖库:libimobiledevice、ios-deploybrew install libimobiledevice --HE...

RN组件之ToolbarAndroid_atkk1691的博客-程序员ITS301

一.ToolbarAndroid  1.该组件封装了Android平台中的ToolBar组件(只适用于Android平台).一个ToolBar组件可以显示一个Logo图标   以及一些导航图片(例如:菜单功能按钮),一个标题以及副标题还有一系列功能的列表.标题和副标题是上下位置.   所以logo图标和导航图标显示在左边,标题和副标题显示在中间,功能列表显示在右边.如果Too...

python的扩展库numpy如何安装_python如何安装numpy库_黄山侯的博客-程序员ITS301

python如何安装numpy库发布时间:2020-09-23 09:53:03来源:亿速云阅读:83作者:小新这篇文章主要介绍了python如何安装numpy库,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数...

推荐文章

热门文章

相关标签