苗条的更漂亮/eslint

Question

我正在尝试使用 svelte 制作一个应用程序来试用它。

我想设置 prettier 和 eslint，我安装了这些依赖项和 Svelte for VS Code 的扩展。

  "dependencies": {
    "eslint": "^7.7.0",
    "eslint-plugin-svelte3": "^2.7.3",
    "prettier": "^2.0.5",
    "prettier-plugin-svelte": "^1.1.0",
    "save-dev": "0.0.1-security",
    "sirv-cli": "^1.0.0",
    "stylelint": "^13.6.1"
  }

现在，我无法设置所有内容。

我做了

.eslintrc

{
  "plugins": ["eslint-plugin-svelte3"],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "semi": "error"
  }
}

.prettierrc

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es6"
}

我想在 .vscode 下使用 settings.json 自动保存

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.prettier": true
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "eslint.validate": ["svelte"]
}

现在我尝试使用它，但是保存时没有任何反应，执行时也没有

"fix": "npx eslint --fix \"src/**/*.svelte\"",
"format": "npx prettier --write \"src/**/*.svelte\""

我错过了什么吗？

Answer 1

出现格式化问题是因为在您的设置中，您告诉 VSCode 使用esbenp.prettier-vscode扩展名格式化所有内容，而该扩展名无法处理 Svelte 文件。将此添加到您的配置中，它应该可以工作。

  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },

作为替代方案，您可以prettier-plugin-svelte从 npm安装。重新加载后，Prettier 会注意到该插件是否在同一node_modules文件夹中，并将 Svelte 文件的格式推迟到它。这也应该可以解决您的“运行时 Svelte 文件未格式化npm run format”的问题。

供参考：https : //github.com/sveltejs/language-tools/tree/master/docs#my-code-does-not-get-formatted

出现 ESLint 问题的原因可能是插件名称错误，并且您缺少overrides告诉 ESLint 如何处理 Svelte 文件的部分：

module.exports = {
  plugins: [
    'svelte3'
  ],
  overrides: [
    {
      files: ['*.svelte'],
      processor: 'svelte3/svelte3'
    }
  ],
  ..
};

设置参考：https : //github.com/sveltejs/eslint-plugin-svelte3#installation

Answer 2

已eslint-plugin-svelte3弃用，建议使用eslint-plugin-svelte。

来自官方 SVELTEJS 存储库：

此 ESLint 插件已弃用。eslint-plugin-svelte 是 Svelte 的新官方 ESLint 插件。

按着这些次序

仅供参考，我的配置基于sveltekit（我正在使用 svelte/vite 项目）

1 /检查您的.​​vscode

2/安装这些软件包：

pnpm i -D eslint prettier eslint-config-prettier eslint-plugin-svelte prettier-plugin-svelte

• 我使用pnpm包管理器，但你可以使用npm或yarn。
• -D仅意味着安装在devDependencies
• eslint-config-prettier很有用并且可以很好地eslint协同prettier工作
• eslint-plugin-svelte&轻松管理精简文件prettier-plugin-svelte所需的

3/初始化这些eslint和prettier配置文件：

.eslintrc.cjs（我使用.cjs，但你可以使用任何支持的扩展eslint）

module.exports = {
  root: true,
  extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'],
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    extraFileExtensions: ['.svelte'],
  },
  env: {
    browser: true,
    es2017: true,
    node: true,
  },
};

.prettierrc （我使用.prettierrc，但你可以使用支持的任何名称prettier）

{
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true,
  "printWidth": 100,
  "plugins": ["prettier-plugin-svelte"],
  "overrides": [
    {
      "files": "*.svelte",
      "options": {
        "parser": "svelte"
      }
    }
  ]
}

• 您可以设置自己喜欢的代码风格，但最重要的部分是plugins& overrides。

.eslintignore（可选但有用git）

.DS_Store
node_modules
/dist
.env
.env.*
!.env.example

# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

.prettierignore（可选但有用git）

.DS_Store
node_modules
/dist
/package
.env
.env.*
!.env.example

# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

4/将其添加到您的.vscode/settings.json：

{
  ...
  "eslint.validate": ["javascript", "svelte"],
  ...
}

5/在您的文件中添加脚本package.json，以便通过一个命令格式化所有 JS/HTML/(S)CSS/SVELTE 文件：

"scripts": {
  ...
  "format": "prettier --plugin-search-dir . --write ."
},

6/检查VS Code 设置（全局和工作区）以确保 Svelte 文件的默认格式化程序设置为 Prettier。

7/重新启动您的vscode

8/测试它是否适用于命令行pnpm format（或npm run format或yarn format）

奖金：

如果您想自动设置代码格式，请在保存文件时将此行添加到您的.vscode/settings.json：

{
  ...
  "editor.formatOnSave": true
}