Question

I am trying to make an app using svelte to try it out.

我愿设立前线和专线,我安装了这些附属设施,并延长了《科索沃法典》的Svelte。

  "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"
}

我和我一样,希望能与环境实现自动化。 json under .vscode

{
  "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告诉大家,把一切都与<条码>有关。在座各位面前加上这一点,它应当发挥作用。

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

As an alternative you can install prettier-plugin-svelte from npm. After a reload, Prettier will notice this plugin if it s in the same node_modules folder and defer formatting of Svelte file to it. This should also fix your "Svelte files do not get formatted when running npm run format" problem.

For reference: https://github.com/sveltejs/language-tools/tree/master/docs#my-code-does-not-get-formatted

The ESLint problem likely occurs because the plugin name is wrong and you are missing the overrides section which tells ESLint how to treat Svelte files:

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

设置参考资料:

Answer 2

<>条码>slint-plugin-svelte3,deprecated,但建议使用<条码>slint-plugin-svelte。

官员 SVELTEJS :

This ESLint plugin is deprecated. eslint-plugin-svelte is the new official ESLint plugin for Svelte.

FOLLOW THESE STEPS

<>FYI 我的配置基于https://kit.svelte.dev/docs/creating-a-project”rel=“noreferer”>。 (我正在使用一个Svelte/vite项目)。

1/Check [prettier &_svelte vscode 延期安装在<代码>vscode。

2 <>Install 这些一揽子计划:

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

I use pnpm package manager, but you can use npm or yarn.
-D only means installed in devDependencies
eslint-config-prettier is useful for eslint & prettier work well together
eslint-plugin-svelte & prettier-plugin-svelte are needed to easily manage svelte files

http://www.un.org/Depts/DGACM/index_french.htm

.eslintrc.cjs (I use .cjs, but You can use any of extension supplemented by 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 (I use .prettierrc, but You can use any name supplemented by prettier

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

you can set your own preferred code style, but the most important parts are plugins & overrides.

.eslintignore (optional but useful for 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/Add,载于.vscode/dings.json:

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

www.un.org/Depts/DGACM/index_russian.htm

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

6/check 您的《瑞士联邦法典》环境(包括全球和工作空间),以确保Svelte案卷的缺省格式由Prettier确定。

www.un.org/spanish/ecosoc

∗∗∗∗ 如果与指挥线路<代码>pnpm 格式(或<编码>npm 跑道格式或yarn Format

www.un.org/Depts/DGACM/index_arabic.htm

如果你想在保存档案时自动填写你的代码,在<代码>.vscode/dings.json <上添加这一行文:

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

友情链接