eslint+prettier统一代码风格的实现方法
(编辑:jimmy 日期: 2024/11/25 浏览:3 次 )
1.实现效果
Eslint校验代码语法,prettier统一格式化代码,按下保存自动修复eslint错误,自动格式化代码。
2.安装vscode插件
- Vetur
- ESLint
- Prettier - Code formatter
3.配置vscode设置
文件–首选项–设置,打开json模式,添加以下配置:
{ // 控制工作台中活动栏的可见性。 "workbench.activityBar.visible": true, //主题设置 "workbench.colorTheme": "Monokai", // 默认编辑器字号 "editor.fontSize": 14, //是否自动换行 "editor.wordWrap": "on", "workbench.editor.enablePreview": false, //打开文件不覆盖 "search.followSymlinks": false, //关闭rg.exe进程 "editor.minimap.enabled": false, //关闭迷你图快速预览 "files.autoSave": "onWindowChange", // 切换窗口时自动保存。 "editor.lineNumbers": "on", //开启行数提示 "editor.quickSuggestions": { //开启自动显示建议 "other": true, "comments": true, "strings": true }, "editor.tabSize": 2, //制表符符号eslint //.vue文件template格式化支持,并使用js-beautify-html插件 "vetur.format.defaultFormatter.html": "js-beautify-html", //js-beautify-html格式化配置,属性强制换行 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" } }, //根据文件后缀名定义vue文件类型 "files.associations": { "*.vue": "vue" }, //配置 ESLint 检查的文件类型 "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], //保存时eslint自动修复错误 "eslint.autoFixOnSave": true, //保存自动格式化 "editor.formatOnSave": true }
4.配置.eslintrc.js
module.exports = { root: true, env: { node: true }, extends: ['plugin:vue/essential', 'eslint:recommended'], rules: { 'no-console': process.env.NODE_ENV === 'production' "color: #ff0000">5.配置.prettierrc
{ "eslintIntegration": true, "singleQuote": true, "semi": false }
下一篇:解决vue-router 切换tab标签关闭时缓存问题