vue项目eslint+prettier 统一代码风格

最新推荐文章于 2024-08-02 16:55:52 发布

weixin_45439379

最新推荐文章于 2024-08-02 16:55:52 发布

阅读量679

点赞数

文章标签： eslint

本文链接：https://blog.csdn.net/weixin_45439379/article/details/120102981

版权

本文介绍了如何在Vue项目中整合eslint和prettier，实现代码风格的统一。通过安装相关插件，配置VSCode设置，设置.eslintrc.js和.prettierrc文件，可以实现保存时自动修复eslint错误和格式化。同时，文中解决了配置过程中可能出现的错误，并提供了关闭eslint检查的方法。

摘要由CSDN通过智能技术生成

vue项目eslint+prettier 统一代码风格

前言

一、

（方案一）

说明：eslint+prettier-让prettier使用eslint的代码格式进行校验

步骤：

1.安装vscode插件

Vetur
ESLint
Prettier - Code formatter

2.配置vscode设置

{
 // 控制工作台中活动栏的可见性。
 "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",
 "html",
 "vue"
 ],
 //保存时eslint自动修复错误
 "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
  },
 //保存自动格式化
 "editor.formatOnSave": true
}

3.配置.eslintrc.js

module.exports = {
 root: true,
 env: {
 node: true
 },
 extends: ['plugin:vue/essential', 'eslint:recommended'],
 rules: {
 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 //强制使用单引号
 quotes: ['error', 'single'],
 //强制不使用分号结尾
 semi: ['error', 'never']
 },
 parserOptions: {
 parser: 'babel-eslint'
 }
}

4.配置.prettierrc

{
 "eslintIntegration": true, // #让prettier使用eslint的代码格式进行校验 
 "singleQuote": true, //单引号包含字符串
 "semi": false,	//不添加末尾分号
}

（方案二）

说明：vue+vetur+eslint+prettier自动格式化功能

步骤：

步骤1，2同上（暂未四选一，未测试）

1配置参考
 2配置大全
 3segmentfault配置
 4参考配置

二、使用步骤

1.简介完整配置版本*****

简介完整配置版本-eslint+prettier

注意：出现的报错：

（1）在vscode中配制setting.json遇到“Auto Fix is enabled by default. Use the single string form.”报错解决
（2）vscode的elsint配置报错“The setting is deprecated. Use editor.codeActionsOnSave instead with a source”

2.读入数据

三、关闭校验

vue项目关闭eslint检查

vue3.0 如何取消eslint 的代码格式校验

四、常见问题

eslint VS prettier

如果你使用的css预处理器是stylus，那么还需要加入以下配置

关闭 vscode 默认的检查工具

同时使用eslint和prettier的配置

Vetur插件用于识别vue文件，原本vetur自带格式化功能，但是和eslint会有冲突

prettier不能格式化vue文件template 所以使用js-beautify-html格式化

错误如：error: Delete ⏎ (prettier/prettier) at src/pages/xxx 等；这是因为prettier配置和编辑器prettier配置冲突导致的在rules中配置下覆盖掉就可以了

五、set.json中初始化配置

{
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": null
}

现在的版本

{
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.formatOnSave": true,
    "editor.fontLigatures": null
}