vscode配置setting.json文件实现eslint自动格式代码

一、ESlint+Vetur 实现ESlint代码规范


二、重点----旧版本(旧版本配置在setting.json 会出现警告)

{
“eslint.autoFixOnSave”: true,
“eslint.validate”: [
“javascript”,
{
“language”: “vue”,
“autoFix”: true
},
{
“language”: “html”,
“autoFix”: true
}
]
}

三、新版配置----新版本


{
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: true
},
“eslint.probe”: [“javascript”, “vue”, “html”]
}

以下是对自己vscode-settings.json 做一个记录(仅供参考)

{
 //设置文字大小
 "editor.fontSize": 18,

 //设置文字行高
 "editor.lineHeight": 24,

 //开启行数提示
 "editor.lineNumbers": "on",

 // 在输入时显示含有参数文档和类型信息的小面板。
 "editor.parameterHints.enabled": true,

 // 调整窗口的缩放级别
 "window.zoomLevel": 0,

 // 文件目录
 "workbench.iconTheme": "vscode-icons",

 // 设置字体
 "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",

 // 自动换行
 "editor.wordWrap": "on",

 // 自定义vscode面板颜色
 "workbench.colorCustomizations": {
  "tab.activeBackground": "#253046", // 活动选项卡的背景色
  "activityBar.background": "#253046", //活动栏背景色
  "sideBar.background": "#253046", //侧边栏背景色
  "activityBar.foreground": "#23f8c8", //活动栏前景色(例如用于图标)
  "editor.background": "#292a2c" //编辑器背景颜色
  // "editor.foreground":"#ff0000", 	//编辑器默认前景色
  // "editor.findMatchBackground":"#23f8c8", 	//当前搜索匹配项的颜色
  // "editor.findMatchHighlightBackground":"#ff0000", 	//其他搜索匹配项的颜色
  // "editor.lineHighlightBackground":"#ff0000", 	//光标所在行高亮文本的背景颜色
  // "editor.selectionBackground":"#ff0000", 	//编辑器所选内容的颜色
  // "editor.selectionHighlightBackground":"#ff0000", 	//与所选内容具有相同内容的区域颜色
  // "editor.rangeHighlightBackground":"#ff0000", 	//突出显示范围的背景颜色,例如 "Quick Open" 和“查找”功能
  // "editorBracketMatch.background":"#ff0000", 	//匹配括号的背景色
  // "editorCursor.foreground":"#ff0000", 	//编辑器光标颜色
  // "editorGutter.background":"#ff0000", 	//编辑器导航线的背景色,导航线包括边缘符号和行号
  // "editorLineNumber.foreground":"#ff0000", 	//编辑器行号颜色
  // "sideBar.foreground":"#ff0000", 	//侧边栏前景色
  // "sideBarSectionHeader.background":"#ff0000", 	//侧边栏节标题的背景颜色
  // "statusBar.background":"#ff0000", 	//标准状态栏背景色
  // "statusBar.noFolderBackground":"#ff0000", 	//没有打开文件夹时状态栏的背景色
  // "statusBar.debuggingBackground":"#ff0000", 	//调试程序时状态栏的背景色
  // "tab.activeForeground":"#ff0000", 	//活动组中活动选项卡的前景色
  // "tab.inactiveBackground":"#ff0000", 	//非活动选项卡的背景色
  // "tab.inactiveForeground":"#ff0000" // 活动组中非活动选项卡的前景色
 },
 // vscode默认启用了根据文件类型自动设置tabsize的选项
 "editor.detectIndentation": false,

 // 重新设定tabsize
 "editor.tabSize": 2,

 // #每次保存的时候自动格式化
 "editor.formatOnSave": true,

 // #让函数(名)和后面的括号之间加个空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

 // #这个按用户自身习惯选择
 "vetur.format.defaultFormatter.html": "js-beautify-html",

 // #让vue中的js按编辑器自带的ts格式进行格式化
 "vetur.format.defaultFormatter.js": "vscode-typescript",

 // 保存时运行的代码ESLint操作类型。
 "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
 },

 // 添加emmet支持vue文件
 "emmet.includeLanguages": {
  "wxml": "html",
  "vue": "html"
 },

 // 两个选择器中是否换行
 "minapp-vscode.disableAutoConfig": true,

 //快速预览(右侧)
 "editor.minimap.enabled": true,

 // tab 代码补全
 "files.associations": {
  "*.wpy": "vue",
  "*.vue": "vue",
  "*.cjson": "jsonc",
  "*.wxss": "css",
  "*.wxs": "javascript"
 },

 // 用来配置如何使用ESLint CLI引擎API启动ESLint。 默认为空选项
 "eslint.options": {
  "extensions": [".js", ".vue"]
 },

 // 在onSave还是onType时执行linter。默认为onType。
 "eslint.run": "onSave",

 // 启用ESLint作为已验证文件的格式化程序。
 "eslint.format.enable": true,

 // 语言标识符的数组,为此ESLint扩展应被激活,并应尝试验证文件。
 "eslint.probe": ["javascript", "javascriptreact", "vue-html", "vue", "html"],

 //关闭rg.exe进程 用cnpm导致会出现rg.exe占用内存很高
 "search.followSymlinks": false,

 // 给js-beautify-html设置属性隔断
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   "wrap_attributes": "force-aligned",
   "max_preserve_newlines": 0
  }
 },

 // style默认偏移一个indent
 "vetur.format.styleInitialIndent": true,

 // 定义匿名函数的函数关键字后面的空格处理。
 "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,

 // 定义函数参数括号前的空格处理方式。
 "typescript.format.insertSpaceBeforeFunctionParenthesis": true,

 // 新版本消息
 "vsicons.dontShowNewVersionMessage": true,

 // 控制资源管理器是否在把文件删除到废纸篓时进行确认。
 "explorer.confirmDelete": true,

 // 使用eslint-plugin-vue验证<template>中的vue-html
 "vetur.validation.template": false,

 // 指定用在工作台中的颜色主题。
 "workbench.colorTheme": "One Dark Pro"
}

总结

到此这篇关于vscode配置setting.json文件实现eslint自动格式代码的文章就介绍到这了,更多相关vscode 配置eslint自动格式化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-08-16

详解Vscode中使用Eslint终极配置大全

在 vue项目中使用vscode编辑时,使用了如下这套配置,保存时就会根据既定vue项目中.eslintrc.js文件设置的既定规则自动校验并依据规则修复代码. 需安装插件 主要是这两个插件: ESLint Prettier - Code formatter 个人现用vscode插件截图.png vscode中setting.json中配置 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, /

vscode中eslint插件的配置(prettier配置无效)

用vue-cli构建vue项目,会有个eslint代码检测的安装 可vscode自带代码格式化是prettier格式(右键有格式化文件或alt+shift+f) 这时候要在vscode上装一个eslint插件 装完后在文件----->首选项------->设置里找到settings.json(快捷键忘了) eslint配置如下,(配置的·具体详情还有待研究,我也是网上copy的,不过亲测可用).保存配置后每次写.vue文件只要control+s保存,就可以把代码格式改成符合eslint标准 &

vscode 配置vue+vetur+eslint+prettier自动格式化功能

该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和eslint会有冲突,所以没用上. vscode ESlint插件 Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示,后面的自定格式化根据这里的错误提示进行格式化操作. 基于vue-cli创建的项目 以下相关步骤需要注意: 创建的时候把Linter/For

vscode配置vue下的es6规范自动格式化详解

前言 最近在写Vue的时候,遇见了js es6格式化问题,因为我平时用vscode在写php,所以会安装一些格式化插件,也包括html-css-js的插件 导致的问题:由于vue语法规范问题,导致保存自动格式化成不被使用的代码格式,出现代码错误等异常 写这篇的时候,我也查阅了很多资料有很多的资料不能被使用,也换过很多的编辑器如:Atom,sublime,webstorm 否掉的编辑器 Atom 这一款编辑器真心颜值高,但是插件是真心不好弄,各种被墙,各种的不适应,所以我决定还是弃掉 sublim

VScode格式化ESlint方法(最全最好用方法)

ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 背景: 近来研究前端,然后一直在百度上找VScode格式化(ESlint)的插件,结果找了半天都不靠谱.目前没有一个可以格式化html.css.符合ESlint的js.vue的插件,所以自己东拼西凑加实践找到解决方法. 解决方案: 1.安装插件 1)ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~

Vue-cli Eslint在vscode里代码自动格式化的方法

编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等. 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持. 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则: { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier&qu

vscode写python时的代码错误提醒和自动格式化的方法

python的代码错误检查通常用pep8.pylint和flake8,自动格式化代码通常用autopep8.yapf.black.这些工具均可以利用pip进行安装,这里介绍传统的利用pip.exe安装和在VScode中安装两种方式. [温馨提醒] 要使用flake8或要想flake8等工具起作用,前提是必须把settings.json文件中的"python.linting.enabled"值设为"true",否则即使安装了这些工具,也起不到代码的错误提醒. [传统安

vue cli 3.x 项目部署到 github pages的方法

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

使用mybatis-plus-generator进行代码自动生成的方法

为了解放程序员的双手,减少重复性代码的编写,推荐使用插件:mybatis-plus-generator 进行代码自动生成.下面我将详细介绍通过mybatis-plus-generator 插件自动生成 controller.service.mapper.serviceImpl相关代码. 项目工程目录总览如下: 1. 使用 idea 创建 maven 项目,引入相关依赖,项目pom文件如下所示: <?xml version="1.0" encoding="UTF-8&qu

Intellij IDEA 录制快捷键实现自动格式化的方法

问题描述 我们在写代码的时候,Intellij IDEA 提供了快捷键格式化代码,以 Mac 快捷键为列子就是 ctrl + alt + L.但是习惯了还好说,没有习惯的人总是忘记格式化代码,或者压根儿就没有格式化代码习惯的人就很头疼了. 那有没有一种插件让它一直自动格式化呢?或者我把格式化的快捷键设置为回车或者常用的分号:怎么样?这样就能在写代码的时候,顺手格式化了. 前者插件我是没有找到的. 后者快捷键设置为回车是不行的,根本没法设置回车为快捷键,然后如果直接设置分号为快捷键的话,分号便没有

在vscode里使用.vue代码模板的方法

1.设置.vue模板 打开编辑器,点击文件 -- 首选项 -- 用户代码片段,会弹出来一个输入框. 在输入框输入vue,回车,会打开一个vue.json文件. 在里面复制以下代码: { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div class=\"container\"

Vue cli+mui 区域滚动的实例代码

vue cli+mui配合使用达到区域滚到的效果 ,方法如下 第一步 引入mui css js @import url("/static/mui.min.css"); JS import mui from '../../../static/mui.min.js'; 第二步 写结构 mui的区域滚动结构是这样的 <div class="mui-scroll-wrapper"> <div class="mui-scroll">

win10环境下vscode Linux C++开发代码自动提示配置(基于WSL)

安装 vs code, 安装 c/c++ 插件 C/C++ IntelliSense,TabNine,Bracket Pair Colorizer. 在win10下打开linux子系统设置(具体搜索教程),在应用商店安装ubutu16. 打开File->Preferences->settings,编辑settings.json. copy 以下的内容替换settings.json "C_Cpp.default.compilerPath": "/usr/bin/g+

python中如何设置代码自动提示

第一步:打开pycharm,如下图所示: 第二步:File→Power Save Mode,把下面如图所示的勾去掉: 第三步:去掉勾后,不再使用省电模式,新建一个 python文件,输入需要输入的单词的前面的字母,就会自动提示了.如下图: 知识点扩展: Python代码的自动补全 我所知道的python编辑器有Pydev.Pycharm.Sublime.Eric.还有就是Vim.Emacs(听说VS也行). Pydev用过一段时间(半个月左右).Pycharm用的时间不超过2天(30天试用版).

vue+ESLint 配置保存 自动格式化代码

1. 在.eslintrc.js 添加 vscode 终端启动服务 // 添加⾃定义规则 'prettier/prettier': [ // eslint校验不成功后,error或2则报错,warn或1则警告,off或0则⽆提示 'error', { singleQuote: true, semi: false, //结束是否加分号 printWidth: 160//每行最长字符 } ] 2.打开VS code 文件>首选项>设置>扩展>ESLint> // eslint格式