2022年最新配置:Eslint+Prettier+Volar
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
{ //打开文件不覆盖 "workbench.editor.enablePreview": false, // 使用主题 "workbench.colorTheme": "One Dark Pro", // 配置图标主题 "workbench.iconTheme": "material-icon-theme", // 手机项目rem适配 "px-to-rem.px-per-rem": 100, // 保存时格式化代码 "editor.formatOnSave": true, // 每次保存的时候将代码按eslint格式进行修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, //配置对 .vue 文件的格式化 "[vue]": { "editor.defaultFormatter": "Vue.volar" }, //配置对 .ts 文件的格式化 "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, //配置对 .js 文件的格式化 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, //配置对 .json 文件的格式化 "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } // 用户代码片段生成网址 // https://snippet-generator.app/ } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
{ //打开文件不覆盖 "workbench.editor.enablePreview": false, //关闭快速预览 "editor.minimap.enabled": false, //打开自动保存 "files.autoSave": "afterDelay", //使用主题 "workbench.colorTheme": "Darcula Theme from IntelliJ", // 头部注释 "fileheader.customMade": { "Author": "yhy", "Date": "Do not edit", // 设置后默认设置文件生成时间 "LastEditTime": "Do not edit", // 设置后,保存文件更改默认更新最后编辑时间 "LastEditors": "yhy", // 设置后,保存文件更改默认更新最后编辑人 "Description": "" }, // 函数注释 "fileheader.cursorMode": { "description": "", "param": "", "return": "" }, //手机项目rem适配 "px-to-rem.px-per-rem": 100, // -----------------------自动格式化配置eslint+prettier----------------------- // 每次保存自动格式化ctrl+s "editor.formatOnSave": true, // 每次保存的时候将代码按eslint格式进行修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, //配置内配置对 .vue 文件的格式化 "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, //配置内配置对 .ts 文件的格式化 "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, //配置内配置对 .js 文件的格式化 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, //配置内配置对 .json 文件的格式化 "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } |
1 2 3 4 5 |
{ "semi": false, //去掉末尾分号 "singleQuote": true, //单引号代替双引号 "printWidth": 80 //多少字符自动换行 } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended', '@vue/prettier', '@vue/prettier/@typescript-eslint' ], parserOptions: { ecmaVersion: 2020 }, // "off"或者0 //关闭规则 // "warn"或者1 //在打开的规则作为警告(不影响退出代码) // "error"或者2 //把规则作为一个错误(退出代码触发时为1) rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'prefer-const': 0 //首选const } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
{ "workbench.editor.enablePreview": false, //打开文件不覆盖 "editor.minimap.enabled": false, //关闭快速预览 "files.autoSave": "afterDelay", //打开自动保存 "editor.formatOnSave": true, //每次保存自动格式化 "editor.codeActionsOnSave": { // 每次保存的时候将代码按eslint格式进行修复 "source.fixAll.eslint": true }, "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" //属性强制折行对齐 } }, "workbench.colorTheme": "Darcula Theme from IntelliJ", // 头部注释 "fileheader.customMade": { // 头部注释默认字段 "Author": "yhy", "Date": "Do not edit", // 设置后默认设置文件生成时间 "LastEditTime": "Do not edit", // 设置后,保存文件更改默认更新最后编辑时间 "LastEditors": "yhy", // 设置后,保存文件更改默认更新最后编辑人 "Description": "" }, // 函数注释 "fileheader.cursorMode": { // 默认字段 "description": "", "param": "", "return": "" }, "px-to-rem.px-per-rem": 100 //rem适配 } |
.prettierrc
1 2 3 4 5 |
{ "eslintIntegration": true, //让prettier使用eslint的代码格式进行校验 "semi": false, //去掉代码结尾的分号 "singleQuote": true //使用带引号替代双引号 } |
插件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
{ "workbench.editor.enablePreview": false, //打开文件不覆盖 "search.followSymlinks": false, //关闭rg.exe进程 "editor.minimap.enabled": false, //关闭快速预览 "liveServer.settings.donotShowInfoMsg": true, //关闭liveserver提示 "files.autoSave": "afterDelay", //打开自动保存 "editor.fontSize": 16, //设置文字大小 "editor.lineHeight": 24, //设置文字行高 "editor.lineNumbers": "on", //开启行数提示 "editor.quickSuggestions": { //开启自动显示建议 "other": true, "comments": true, "strings": true }, "workbench.colorTheme": "Darcula Theme from IntelliJ", //指定工作台中使用的颜色主题 "window.zoomLevel" : 0 , // 调整窗口的缩放级别 "editor.tabSize": 2, //制表符符号eslint "editor.formatOnSave": true, //每次保存自动格式化 "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复 "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验 "prettier.semi": false, //去掉代码结尾的分号 "prettier.singleQuote": true, //使用带引号替代双引号 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" // 属性强制折行对齐 } }, "eslint.validate": [ //开启对.vue文件中错误的检查 "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ], } |
在.eslintrc.js添加
注意:eslint, prettier-Code formatter ,vetur 这三个插件必须安装,其他的插件根据自己的习惯
from:https://blog.csdn.net/weixin_36222137/article/details/80040758