vscode_eslint 增加识别后缀wxss-程序员宅基地

vscode最佳配置

配置说明详解

  • vscode配置内容在最后,已附上。可直接copy使用

editor是针对vscode的风格设置 
例如 tabSize:一个tab等于2个空格,行高为24px


workbench是针对vscode的主题设置 
例如 iconTheme( 图标风格):使用插件 vscode-great-icons (需搜索安装) 
例如 colorTheme(代码颜色风格):使用插件One Dark Pro Vivid(需搜索安装)


search.exclude 配置vscode中在项目中的哪些地方被排除搜索


files.associations 配置文件关联,比如 
“files.associations”: { 
“*.vue”: “vue”, 
“*.wxss”: “css” 

任何wxss后缀的文件会被认为是css文件 ,然后vscode会用css规则去显示代码风格,给出加载对应文件格式插件


sync是用于同步vscode配置使用,不用每一次换个电脑都要复制,很容易丢失或者改动,无法保持一致!


apicloud 是用于同步vscode开发apicloud程序时进行手机wifi真机同步使用,不用数据线。

vscode插件安装

  • Atom One Dark Theme 主题
  • VSCode Great Icons 图标主题
  • Beautify 美化vscode代码
  • Bracket Pair Colorizer 每一对括号用不同颜色区别 (括号强迫症必备)
  • cssrem 将css中的px自动转换为rem.再也不用计算器了(大漠大神推介)
  • Code Runner node,python等代码不必开命令行即可运行
  • Eslint 语法检测
  • Git History git提交历史
  • GitLens 在代码中显示每一行代码的提交历史
  • HTML CSS Support vscode对html,css文件支持,便于你快速书写属性
  • Path Intellisense 路径识别苦战,比如书写图片路径时。遗憾就是,对webpack项目中的路径别名无法扩展
  • Prettier 格式化,使用标准风格,快捷键 alt+shift +F
  • Python 添加对.py文件的支持,毕竟tab与空格的痛苦写过python的都知道
  • React Native Tools 添加对 React Native项目的支持,快速书写es6以及jsx
  • C/C++ 运行React Native项目时,有些文件的查看需要这个
  • Settings Sync 用于同步vscode配置,多台电脑一份配置(相对而言配置复杂,可不安装)
  • Sublime Text Keymap 启动sublimeText的快捷键配置。vscode上面自有一套快捷键设定,个人习惯sublime快捷键
  • Vetur 添加对.vue后缀文件的快速书写支持。
  • Vue 2 Snippets 快速新建vue页面(参考我另一篇文章)
  • markdownlint 书写md文件的预览插件
  • language-stylus CSS预处理器styl后缀文件的识别扩展
  • View In Browser 迅速通过浏览器打开html文件
{ // VScode主题配置
    "editor.tabSize": 2,
    "editor.lineHeight": 24,
    "editor.renderLineHighlight": "none",
    "editor.renderWhitespace": "none",
    "editor.fontFamily": "Consolas",
    "editor.fontSize": 15,
    "editor.cursorBlinking": "smooth",
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": true,
    // 是否允许自定义的snippet片段提示,比如自定义的vue片段开启后就可以智能提示
    "editor.snippetSuggestions": "top",
    "workbench.iconTheme": "vscode-great-icons",
    "workbench.colorTheme": "One Dark Pro Vivid",
    "workbench.startupEditor": "newUntitledFile",
    "html.suggest.angular1": false,
    "html.suggest.ionic": false,
    "files.trimTrailingWhitespace": true,
    // vetur插件格式化使用beautify内置规则
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // VScode 文件搜索区域配置
    "search.exclude": {
        "**/dist": true,
        "**/build": true,
        "**/elehukouben": true,
        "**/.git": true,
        "**/.gitignore": true,
        "**/.svn": true,
        "**/.DS_Store": true,
        "**/.idea": true,
        "**/.vscode": false,
        "**/yarn.lock": true,
        "**/tmp": true
    },
    // 排除文件搜索区域,比如node_modules(贴心的默认设置已经屏蔽了)
    "files.exclude": {
        "**/.idea": true,
        "**/yarn.lock": true,
        "**/tmp": true
    },
    // 配置文件关联,以便启用对应的智能提示,比如wxss使用css
    "files.associations": {
        "*.vue": "vue",
        "*.wxss": "css"
    },
    // 配置emmet是否启用tab展开缩写
    "emmet.triggerExpansionOnTab": true,
    // 配置emmet对文件类型的支持,比如vue后缀文件按照html文件来进行emmet扩写
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html",
        "javascript": "javascriptreact",
        // xml类型文件默认都是单引号,开启对非单引号的emmet识别
        "xml": {
            "attr_quotes": "single"
        }
    },
    // 在react的jsx中添加对emmet的支持
    "emmet.includeLanguages": {
        "jsx-sublime-babel-tags": "javascriptreact"
    },
    // 是否开启eslint检测
    "eslint.enable": false,
    // 文件保存时,是否自动根据eslint进行格式化
    "eslint.autoFixOnSave": false,
    // eslint配置文件
    "eslint.options": {
        "plugins": [
            "html",
            "javascript",
            {
                "language": "vue",
                "autoFix": true
            },
            "vue"
        ]
    },
    // eslint能够识别的文件后缀类型
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        "typescript",
        "typescriptreact"
    ],
    // 快捷键方案,使用sublime的一套快捷键
    "sublimeTextKeymap.promptV3Features": true,
    // 格式化快捷键 shirt+alt+F
    // prettier进行格式化时是否安装eslint配置去执行,建议false
    "prettier.eslintIntegration": true,
    // 如果为true,将使用单引号而不是双引号
    "prettier.singleQuote": true,
    // 细节,配置gitlen中git提交历史记录的信息显示情况
    "gitlens.advanced.messages": {
        "suppressCommitHasNoPreviousCommitWarning": false,
        "suppressCommitNotFoundWarning": false,
        "suppressFileNotUnderSourceControlWarning": false,
        "suppressGitVersionWarning": false,
        "suppressLineUncommittedWarning": false,
        "suppressNoRepositoryWarning": false,
        "suppressResultsExplorerNotice": false,
        "suppressUpdateNotice": true,
        "suppressWelcomeNotice": false
    },
    // 开启apicloud在vscode中的wifi真机同步
    "apicloud.port": "23450",
    // 设置apicloud在vscode中的wifi真机同步根目录
    "apicloud.subdirectories": "/apiclouduser",
    // git是否启用自动拉取
    "git.autofetch": true,
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/joker6295/article/details/82767040

智能推荐

linux配置数据库密码加密,Linux安装编译SQLCipher,对sqlite数据库加密、解密、修改、去掉密码操作-Go语言中文社区...-程序员宅基地

文章浏览阅读754次。SQLCipher主要APIPRAGMA keyExample 1: Passphrase with Key Derivationsqlite> PRAGMAkey = 'passphrase';Example 2: Raw Key Data (Without KeyDerivation)sqlite> PRAGMA key = "x'2DD29CA851E7B56E4697B0E1F...

小米线刷教程+小米8背面指纹版的MIUI10和MIUI11包分享_miui 10.0.11.0-程序员宅基地

文章浏览阅读2.7k次。注意:线刷有风险,本文仅提供线刷思路,刷机前请谨慎考虑,如刷机出现意外,本人概不负责1.打开官网线刷升级教程 http://www.miui.com/shuaji-393.html2.按官方教程,申请解BL锁 按教程如果有BL锁,先申请解锁(申请很快,几秒的事情),申请通过后使用解锁工具解锁即可。解锁很简单,按照官方教程相信很容易的进行解锁的。值得注意的是解锁工具好像不能识别USB3.0的连接(我的小米游戏本就无法检测到手机,小米笔记本就可以)3.解BL锁成功..._miui 10.0.11.0

java打包后发布找不到jsp_eclipse中web项目部署以后jsp的java文件找不到问题(Tomcat配置serverlocations)...-程序员宅基地

文章浏览阅读414次。我的开发环境:eclipse kepler (4.3)+tomcat7.0.42.在我想看eclipse中web项目jsp文件被tomcat转换成java以后的java源文件的位置,发现正常情况下的webapps以下,没有看到我部署的项目同一时候,work文件夹(jsp的工作文件夹)以下也没有生成相关的jsp的class文件和java源文件。可是我想看源代码啊。找了一堆关于jsp的源代码位置的文章..._tomcat找不到jar包中的新增jsp文件

linux镜像添加驱动,添加raid驱动到initrd.img-程序员宅基地

文章浏览阅读1.9k次。2.1 获得raid驱动程序megasr-13.15.1218.2009-1-rhel50-u4-all.img2.2获得光盘镜像initrd.img文件initrd.img2.3 准备环境将驱动文件挂在到/mnt目录上,并将内容复制到指定的目录下工作环境为/tmp/test目录下。mount megasr-13.15.1218.2009-1-rhel50-u4-all.img /mntmkdir..._如何把阵列卡驱动放入inited.img

java 微信分享朋友圈 链接显示图片_【微信开发】-- 微信分享功能(分享到朋友和朋友圈显示图片和简介)...-程序员宅基地

文章浏览阅读809次。想在微站里面实现分享帖子给朋友和朋友圈,显示图片和简介,就这么简单的功能折腾了1星期。。。主要是微信官方文档没看清楚,怪自己了。遇到invalid signature签名错误。找了半天,各种调试,终于找到问题了,每个新闻的id是变动的,url需要传入完整的地址,在微信官方手册里面查到的。比如页面是http://www.baidu.com/wx.aspx?id=111,需要完整传入,不能仅仅在url..._微信 分享页面 带图片简介

redis集群 redis-cluster_mogodb+redis-程序员宅基地

文章浏览阅读179次。什么是Redis-Cluster? 为何要搭建Redis 集群。Redis 是在内存中保存数据的,而我们的电脑一般内存都不大,这也就意味着Redis 不适合存储大数据,适合存储大数据的是Hadoop 生态系统的Hbase 或者是MogoDB。Redis 更适合处理高并发,一台设备的存储能力是很限的,但是多台设备协同合作,就可以让内存增大很多倍,这就需要用到集群。 Red..._mogodb+redis

随便推点

什么是派生类的基类子对象?_C++ 面向对象编程小心得-程序员宅基地

文章浏览阅读1.2k次。今天来点不一样的内容!开启C++学习。先做一波读书笔记,慢慢学,慢慢进步!你是不很懵逼,我看这玩意干啥(狗头)先放一波心得体会~:一、继承这个行为允许我们在基类上编写一些新的类,新的类可以共享基类的方法与属性,也可以根据实际的问题在派生类上覆盖基类的行为或增加新的内容。在程序运行时根据对象的动态类型选择函数的运行版本,我们称之为动态绑定(c++语言中动态绑定需要通过指针或引用调用,且只作用于虚函数..._派生类中子对象

dw中各元素的html标签的写法,Dreamweaver使用标签选择器添加标签-程序员宅基地

文章浏览阅读2.1k次。使用标签选择器添加标签1.创建 Trio Motors 主页中的下一个步骤是在页面顶部的横幅图像两侧添加 div 标签。(有关向页面添加图像的说明,请参见添加图像。)有多种方法可以在图像的两侧添加 div 标签;本课介绍如何使用标签选择器来添加标签。标签选择器可以帮助您插入任何标签,并添加相应的属性值。2.要使用标签选择器编写代码,请执行以下操作:3.如果 index.html 未打开,则打开它,..._dw里面写html 用写标签吗

mysql 5.1启动 1067_mysql启动错误1067的解决-程序员宅基地

文章浏览阅读157次。安装后MYSQL5后,发现启动出错,有时启动正常,但加接时马上出错。出错代码:1067解决办法如下:删除%windows%/my.ini删除其它地方的my.ini在mysql安装目录下把my-small.ini复制为my.ini在my.ini最后一行插入:CODE:[mysqld]#设置basedir指向mysql的安装路径basedir=C:\mysql-5.1.11-beta-win32dat..._mysql5.1 1067

Android x86 外置蓝牙,Bluetooth in Android x86 on Virtualbox-程序员宅基地

文章浏览阅读654次。I'm trying to get Bluetooth working on Android x86 in virtualbox. I have tried both Virtualbox on Linux and Windows, with the latest android x86 iso, but the problem is the same: the bluetooth adapter..._androidx86能否识别usb蓝牙

UE(User Experience)用户体验培训(本大纲可以定制)_用户体验培训课程-程序员宅基地

文章浏览阅读2.4k次。UE(User Experience)用户体验培训(本大纲可以定制) & 课程背景什么是UE(UE——UE就是用户体验)  你会发觉他的使用很人性化:功能强大但操作简单,也更易识别。  或许这些都归于Web2.0的定义范畴,但越来越凸出就是一个名词在我脑海中深深震撼着。  或者可以这么说Web2.0是让用户作主,让用户在站点去发现、挖掘更多的信息,同时还具备交互性、操作简_用户体验培训课程

oracle 字符编码修改,oracle查看字符集和修改字符集使用详解-程序员宅基地

文章浏览阅读719次。一、什么是Oracle字符集Oracle字符集是一个字节数据的解释的符号集合,有大小之分,有相互的包容关系。ORACLE 支持国家语言的体系结构允许你使用本地化语言来存储,处理,检索数据。它使数据库工具,错误消息,排序次序,日期,时间,货币,数字,和日历自动适应本地化语言和平台。影响Oracle数据库字符集最重要的参数是NLS_LANG参数。它的格式如下: NLS_LANG = language_..._oracle字符编码