[VSCode] Prettier和ESLint单双引号冲突

原创已于 2023-06-07 02:39:11 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vscode

于 2021-10-16 22:50:55 首次发布

学习笔记专栏收录该内容

70 篇文章

订阅专栏

在使用VSCode开发Vue项目时遇到tabSize问题和Prettier与ESLint冲突。通过创建.vscode/settings.json设置tabSize为2并开启formatOnSave，同时修改.eslintrc.js的rules以适应单引号。然而，仍出现警告，解决办法是添加.prettierrc.js文件并重启VSCode。但奇怪的是，settings.json中关于prettier的配置未生效。

“工欲善其事，必先利其器。”

用了这么久的VS Code，今天写个简单页面，又磕磕绊绊弄了1个多小时。

首先是tabSize的问题，默认好像tabSize是4。

当然不想改全局配置，最好是基于项目的配置。

首先，在项目根目录，创建一个.vscode的目录，然后再目录下创建一个settings.json的文件。

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "prettier.semi": false,
  "prettier.singleQuote": true
}

tabSize改为2，formatOnSave保存时格式化开启。

此项目是通过Vue CLI创建的前端项目，默认选了ESlint。

结果应该是Prettier和ESlint冲突，报一堆warning，一会儿“单引号”，一会儿“双引号”，晕倒了。

在.eslintrc.js的rules里增加一行quotes，值为[1, 'singal']。

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    semi: ['error', 'always'],
    quotes: ['error', 'single'],
  },
}

貌似还不行！
后搜了网上的文章，还是要加一个.prettierrc.js。

module.exports = {
  singleQuote: true,
  semi: false,
}

文章上说改后要重启VS Code，貌似有用。

但是，很奇怪，为什么settings.json里配置prettier.singleQuote的没有生效？

这个问题先留着，有路过的知道可以解答一下。