关于Eslint和Prettier冲突

Eslint是JavaScript代码检查工具；Prettier是美化Html+CSS+JavaScript代码。但是它们两个一起使用会产生冲突，需要在项目中创建.eslintrc.js和.prettier.js配置文件（如果是JSON格式文件就用键值对) 我使用的是vscode编译器，安装eslint和prettier插件。

• 首先要在setting.json中添加这部分

{
    //保存自动格式化
     "editor.formatOnType": true,
     "editor.formatOnSave": true,
    //保存自动eslint修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
    
}

• 这时候保存会出现一个鬼畜现象，双引号变单引号突然又跳回双引号，这是因为prettier和eslint的规则冲突，现在只需要在.eslintrc.js和.prettier.js它们两个配置文件中统一下规则即可（eslint默认规则是单引号，无分号和末尾逗号）

// .prettier.js规则
    module.exports = {
    printWidth: 120,
    tabWidth: 4,
    useTabs: false,
    singleQuote: true,
    trailingComma: none,
    semi: false,
    trailingComma: "es5",
    bracketSpacing: false,
    jsxBracketSameLine: false,
    arrowParens: "avoid",
    endOfLine: "auto",
}

还有一个关于在setting.json中配置prettier无效，其实是因为vetur设置的优先级比prettier高,vetur自带prettier，需要的是更改vetur的设置

参考文章juejin.cn/post/699092…