vscode 前端最佳插件配置

格式化代码时用到的插件

ESLint（代码规范和错误检查工具，控制代码质量）
Prettier（代码格式化工具）
Vetur（识别 vue 文件）
EditorConfig for VS Code（定义项目的编码规范，编辑器的行为会与.editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高，这在多人合作开发项目时十分有用而且必要）
Syncing（同步你的 VS Code 配置，在另一台机器使用可以自动同步配置，不需要重新慢慢配了）
Manta’s Stylus Supremacy（使得 stylus 格式化更好看）

一、ESLint检查与保存修复

如果项目使用ESLint，按以下设置保存自动修复飘红代码
对 vscode >1.41.0生效
ESLint官网
如果ESLint配置的完整，prettier加不加都可以，保存自动修复不合规代码

  // --------------------  配置eslint  --------------------//autoFixedOnSave 设置已废弃，采用如下新的设置，新版(>1.41.0)配置"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"eslint.format.enable": true,//autoFix默认开启，只需输入字符串数组即可"eslint.validate": ["javascript","vue","html","javascriptreact","vue-html"],// --------------------  配置eslint  --------------------

二、格式化vue文件不自动换行

1、vscode下载ESlint, Prettier, Vetur插件
2、打开vscode 选择文件->首选项->设置
3、搜索vetur.format.defaultFormatterOptions，之后在setting.json中编辑
4、ctrl + s 保存，设置默认Vetur
不足：vue中的js无法配置单双引号，句尾分号
settings.json：

  // ----------------  设置属性、js不自动换行  ----------------"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "aligned-multiple" //当超出折行长度时，将属性进行垂直对齐},"prettyhtml": {"printWidth": 100,//每行100字符"singleQuote": false,//单引号强制转双引号"wrapAttributes": false,"sortAttributes": false}},// 这个按用户自身习惯选择"vetur.format.defaultFormatter.html": "js-beautify-html",// 让vue中的js按编辑器自带的ts格式进行格式化"vetur.format.defaultFormatter.js": "vscode-typescript",// ----------------  设置属性、js不自动换行  ----------------

三、Vetur格式化

Vetur配置主要针对vue文件，包含vue文件折行设置，句尾分号，key是否使用单引号，方法末尾是否加逗号进行的配置
vue文件设置默认格式化为Vetur
不足：vue中的js换行有点异常

 // --------------------  vetur 配置  --------------------// vue文件默认格式化工具：vetur"[vue]": {"editor.defaultFormatter": "octref.vetur"},// 这个按用户自身习惯选择"vetur.format.defaultFormatter.html": "js-beautify-html",// 让vue中的js按编辑器自带的ts格式进行格式化//  "vetur.format.defaultFormatter.js": "vscode-typescript",// 让vue中的js按prettier进行格式化 用这个"vetur.format.defaultFormatter.js": "prettier","vetur.format.defaultFormatterOptions": {"js": "prettier","js-beautify-html": {"wrap_attributes": "aligned-multiple" //当超出折行长度时，将属性进行垂直对齐},"prettyhtml": {"tabWidth": 4, // 会忽略vetur的tabSize配置"printWidth": 100, //每行100字符"singleQuote": true, //是否使用单引号"semi": false, // 句尾是否加;"wrapAttributes": false,"sortAttributes": false},//vue中的js生效"prettier": {"semi": false, // 句尾是否加;"singleQuote": true, //是否使用单引号"trailingComma": "none" //禁止随时添加逗号}},// --------------------  vetur 配置  --------------------

三、Prettier格式化

因为vue使用Vetur配置，这里的prettier 单独配置主要针对js文件句尾分号，key是否使用单引号，方法末尾是否加逗号进行的配置
发现设置不生效主要因为Prettier默认按.editorConfig配置为最高优先级
js文件设置默认格式化为Prettier

优先级
1、项目目录的.prettierrc文件，支持json和分号格式（其实还有很多种）
2、项目目录的.editorconfig文件（默认配置)
3、vscode的配置文件（也有好几个地方配置，包括vetur节点下面）

测试过程中发现一个插件可以不按以下配置直接对js文件格式化Prettier-Standard - JavaScript formatter

  // --------------------  prettier 配置(以下配置主要针对.js)  --------------------"prettier.useEditorConfig": false, // 不使用editorConfig配置文件设置才生效"prettier.semi": false, // 句尾是否加;"prettier.singleQuote": true, //是否使用单引号"prettier.trailingComma": "none", //禁止随时添加逗号// --------------------  prettier 配置  --------------------

完整的`setting.json`

{"workbench.iconTheme": "vscode-icons",// --------------------  配置eslint  --------------------//autoFixedOnSave 设置已废弃，采用如下新的设置，新版(>1.41.0)配置"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"eslint.format.enable": true,//autoFix默认开启，只需输入字符串数组即可"eslint.validate": ["javascript","vue","html","javascriptreact","vue-html"],// --------------------  配置eslint  --------------------// 设置编辑器的默认格式化工具"editor.defaultFormatter": "esbenp.prettier-vscode","[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[less]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},//方法括号之间插入空格"javascript.format.insertSpaceBeforeFunctionParenthesis": false,// --------------------  vetur 配置  --------------------// vue文件默认格式化工具：vetur"[vue]": {"editor.defaultFormatter": "octref.vetur"},// 这个按用户自身习惯选择"vetur.format.defaultFormatter.html": "js-beautify-html",// 让vue中的js按编辑器自带的ts格式进行格式化//  "vetur.format.defaultFormatter.js": "vscode-typescript",// 让vue中的js按prettier进行格式化 用这个"vetur.format.defaultFormatter.js": "prettier","vetur.format.defaultFormatterOptions": {"js": "prettier","js-beautify-html": {"wrap_attributes": "aligned-multiple" //当超出折行长度时，将属性进行垂直对齐},"prettyhtml": {"tabWidth": 4, // 会忽略vetur的tabSize配置"printWidth": 100, //每行100字符"singleQuote": true, //是否使用单引号"semi": false, // 句尾是否加;"wrapAttributes": false,"sortAttributes": false},//vue中的js生效"prettier": {"semi": false, // 句尾是否加;"singleQuote": true, //是否使用单引号"trailingComma": "none" //禁止随时添加逗号}},// --------------------  vetur 配置  --------------------// --------------------  koro1FileHeader 配置  --------------------// 头部注释"fileheader.customMade": {"Author": "AuthorName","Date": "Do not edit", // 文件创建时间(不变)"LastEditors": "AuthorName", // 文件最后编辑者"LastEditTime": "Do not edit", // 文件最后编辑时间"Description": ""// "FilePath": "only file name", // 只有文件名// "custom_string_obkoro1_copyright": "Copyright (C) ${now_year} AuthorName. All rights reserved.",// "custom_string_obkoro1_date": "Do not edit" // 不带Date前缀的时间},// 函数注释"fileheader.cursorMode": {"description": "",//"custom_string_obkoro1": "","param": "params","return": ""},// 插件配置项"fileheader.configObj": {"createHeader": false, // 新建文件自动添加头部注释，默认打开"autoAdd": false, // 保存自动添加头部注释，开启才能自动添加，默认开启"openFunctionParamsCheck": true, //函数注释自动提取函数的参数，默认开启"createFileTime": true, // 默认为此文件的创建时间，设为false更改为当前生成注释的时间"dateFormat": "YYYY-MM-DD HH:mm:ss", // 默认时间格式，修改影响所有时间字段// 自定义注释中的艾特和冒号："atSymbol": ["@", "@"], // 所有文件的头部注释和函数注释的默认值 @"colon": [": ", ": "] // 所有文件的头部注释和函数注释的默认值 :// 自定义特殊字段名，Date、LastEditTime、LastEditors、Description、FilePath// "specialOptions": {//   "Date": "since",//   "LastEditTime": "lastTime",//   "LastEditors": "LastAuthor",//   "Description": "message",//   "FilePath": "文件相对于项目的路径"// }// 函数参数配置// "functionParamsShape": "normal", // 正常// "functionParamsShape": "no bracket", // 没有方括号// "functionParamsShape": "no type", // 没有类型// "functionParamsShape": [ "{", "}"], // 函数参数外形自定义，默认值 {}// "functionTypeSymbol": "*", // 参数没有类型时的默认值 *// 函数设置不添加参数和类型 {*}// "functionParamsShape": "no type", // 没有类型// "functionTypeSymbol": "" // 参数没有类型时的默认值 *},// --------------------  koro1FileHeader 配置  --------------------// --------------------  prettier 配置(以下配置主要针对.js)  --------------------"prettier.useEditorConfig": false, // 不使用editorConfig配置文件设置才生效"prettier.semi": false, // 句尾是否加;"prettier.singleQuote": true, //是否使用单引号"prettier.trailingComma": "none", //禁止随时添加逗号// --------------------  prettier 配置  --------------------"git.confirmSync": false,"security.workspace.trust.untrustedFiles": "open"
}

VSCode - setting.json配置 - Prettier、Vetur格式化和ESLint检查相关推荐

前端setting.json配置
前端setting.json配置 {// prettier 的配置文件存放路径 # "prettier.configPath": "~/.prettierrc" ...
vscode中setting.json配置详解
vscode中的setting.json配置文件配置详解话不多说上配置文件大家按需复制到自己的setting.json配置文件中即可 [{// 控制是否在编辑器中显示 CodeLens." ...
VScode seting.json 配置自用
{// VScode主题配置"files.trimFinalNewlines": true,"editor.detectIndentation": true,& ...
vue setting.json配置
{"editor.fontSize": 12, //编辑器字体大小"[scss]": {"editor.defaultFormatter": ...
vscode插件及配置
温馨提示:如果懒得看后面的内容,点这个链接也行, 必备插件yyds vscode必备插件基础插件Chinese 中文包open in browser 在浏览器打开Auto Close Tag 自动闭 ...
【vue setting.json】
vue setting.json 配置 {"editor.fontSize": 12, //编辑器字体大小"[scss]": {"editor.def ...
代码风格统一：使用husky, prettier, eslint在代码提交时自动格式化，并检查代码。...
引言这个需求主要是组内成员用的编辑器不统一,代码风格也各异,所以在修改代码时,如果格式化了代码,在code review阶段很难分辨修改了的代码.当然,代码风格统一还有其他好处,这里就不不多废话了. ...
vscode + ccls环境配置
一.什么是ccls https://github.com/MaskRay/ccls 二.ccls环境搭建 1.编译安装ccls server 见上面github仓库中的说明 2.安装vscode cc ...
vue3+vite配置项目运行前eslint检查以及git提交前eslint检查的方案总结
vue3+vite配置项目运行前eslint检查以及git提交前eslint检查的方案总结 1.需求背景最近在新项目搭建过程中有这样一个需求:由于是团队协同开发,所以在开发是代码规范是一个很重要的环 ...

VSCode - setting.json配置 - Prettier、Vetur格式化和ESLint检查

一、ESLint检查与保存修复

二、格式化vue文件不自动换行

三、Vetur格式化

三、Prettier格式化

完整的`setting.json`

VSCode - setting.json配置 - Prettier、Vetur格式化和ESLint检查相关推荐

最新文章

热门文章

VSCode - setting.json配置 - Prettier、Vetur格式化和ESLint检查

一、ESLint检查与保存修复

二、格式化vue文件不自动换行

三、Vetur格式化

三、Prettier格式化

完整的setting.json

VSCode - setting.json配置 - Prettier、Vetur格式化和ESLint检查相关推荐

最新文章

热门文章

完整的`setting.json`