{"id":2697,"date":"2024-11-10T17:44:25","date_gmt":"2024-11-10T09:44:25","guid":{"rendered":"https:\/\/fwq.ai\/blog\/2697\/"},"modified":"2024-11-10T17:44:25","modified_gmt":"2024-11-10T09:44:25","slug":"%e4%bd%bf%e7%94%a8-prettier%e3%80%81typescript%e3%80%81vuejs-%e5%92%8c-vscode-%e8%ae%be%e7%bd%ae-eslint-%e8%87%aa%e5%8a%a8%e4%bf%9d%e5%ad%98%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/2697\/","title":{"rendered":"\u4f7f\u7528 Prettier\u3001TypeScript\u3001Vuejs \u548c VSCode \u8bbe\u7f6e ESLint \u81ea\u52a8\u4fdd\u5b58\u81ea\u52a8\u683c\u5f0f"},"content":{"rendered":"

\"\u4f7f\u7528<\/p>\n

\u672c\u6307\u5357\u5c06\u5f15\u5bfc\u60a8\u4f7f\u7528 eslint 9.13.0\u3001prettier \u548c \u914d\u7f6e .js \u9879\u76ee\uff0c\u4ee5\u5728 visual studio code \u4e2d\u4fdd\u5b58\u65f6\u542f\u7528\u81ea\u52a8\u4ee3\u7801\u683c\u5f0f\u5316\u548c linting\u3002<\/p>\n

1.\u521b\u5efa\u4e00\u4e2a\u65b0\u7684 <\/h3>\n

\u9996\u5148\u521b\u5efa\u4e00\u4e2a\u65b0\u7684 vue \u9879\u76ee\uff1a<\/p>\n

npm create vue@latest\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u5bfc\u822a\u5230\u9879\u76ee\u76ee\u5f55\uff1a<\/p>\n
cd your-project-directory\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
 2. \u5b89\u88c5\u548c\u66f4\u65b0\u4f9d\u8d56\u9879 <\/h3>\n
\u5b89\u88c5\u9879\u76ee\u4f9d\u8d56\u9879\uff1a<\/p>\n
npm install\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u7136\u540e\uff0c\u4f7f\u7528ncu\uff08node check updates\uff09\u66f4\u65b0\u9879\u76ee\u4f9d\u8d56\u9879\uff1a<\/p>\n
npx ncu -u\nnpm install\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
 3.\u5148\u51b3\u6761\u4ef6\u6dfb\u52a0eslint\u3001prettier\u548ctypescript\u5305 <\/h3>\n
\u6b64\u914d\u7f6e\u9700\u8981\u5728\u672c\u5730\u6216\u5168\u5c40\u5b89\u88c5\u4ee5\u4e0b npm \u8f6f\u4ef6\u5305\uff1a<\/p>\n
prettier\neslint prettier-eslint\n@typescript-eslint\/parser\ntypescript \nvue-eslint-parser\n@vue\/eslint-config-typescript \n@vue\/eslint-config-prettier\n\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u4f7f\u7528 pnpm \u6216 npm \u5b89\u88c5\u5fc5\u8981\u7684\u5f00\u53d1\u4f9d\u8d56\u9879\uff1a<\/p>\n
pnpm install -d prettier eslint prettier-eslint @typescript-eslint\/parser typescript vue-eslint-parser @vue\/eslint-config-typescript @vue\/eslint-config-prettier\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
 4.\u521d\u59cb\u5316eslint\u914d\u7f6e <\/h3>\n
\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\u6765\u8bbe\u7f6e eslint \u914d\u7f6e\uff1a<\/p>\n
npm init @eslint\/config@latest\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u51fa\u73b0\u63d0\u793a\u65f6\uff0c\u8fdb\u884c\u4ee5\u4e0b\u9009\u62e9\u6765\u914d\u7f6e eslint\uff1a<\/p>\n
    \n
  •  \u60a8\u60f3\u5982\u4f55\u4f7f\u7528 eslint\uff1f<\/strong>\uff1a\u68c0\u67e5\u8bed\u6cd5\u5e76\u53d1\u73b0\u95ee\u9898\u3002<\/li>\n
  •  \u60a8\u7684\u9879\u76ee\u4f7f\u7528\u4ec0\u4e48\u7c7b\u578b\u7684\u6a21\u5757\uff1f<\/strong>\uff1acommonjs\uff08\u9700\u8981\/\u5bfc\u51fa\uff09\u3002<\/li>\n
  •  \u60a8\u7684\u9879\u76ee\u4f7f\u7528\u54ea\u4e2a\u6846\u67b6\uff1f<\/strong>\uff1avue.js\u3002<\/li>\n
  •  \u60a8\u7684\u9879\u76ee\u4f7f\u7528 typescript \u5417\uff1f<\/strong>\uff1a\u662f\u7684\u3002<\/li>\n
  •  \u4f60\u7684\u4ee3\u7801\u5728\u54ea\u91cc\u8fd0\u884c\uff1f<\/strong>\uff1a\u6d4f\u89c8\u5668\u3002<\/li>\n
  • \u5f53\u8be2\u95ee\u60a8\u662f\u5426\u8981\u5b89\u88c5\u4f9d\u8d56\u9879\uff08eslint\u3001globals\u3001@eslint\/js\u3001@typescript-eslint\u3001eslint-plugin-vue\uff09\u65f6\uff0c\u9009\u62e9 \u662f<\/strong> \u5e76\u4f7f\u7528 npm<\/strong> \u4f5c\u4e3a\u5305\u7ba1\u7406\u5668\u3002<\/li>\n<\/ul>\n
     5.\u6dfb\u52a0eslint\u5e73\u9762\u914d\u7f6e <\/h3>\n
    \u4e3a\u4e86\u786e\u4fdd eslint \u4f7f\u7528\u65b0\u7684 flat config \u683c\u5f0f\uff0c\u8bf7\u786e\u4fdd\u5728 eslint.config.mjs \u6587\u4ef6\u4e2d\u5305\u542b\u5fc5\u8981\u7684\u914d\u7f6e\u3002\u5bf9\u6b64\u7684\u8c03\u6574\u53ef\u80fd\u53d6\u51b3\u4e8e\u60a8\u7684\u5177\u4f53\u8bbe\u7f6e\u3002<\/p>\n
    import globals from 'globals';\nimport pluginjs from '@eslint\/js';\nimport tseslint from 'typescript-eslint';\nimport pluginvue from 'eslint-plugin-vue';\nimport prettier from 'eslint-plugin-prettier\/recommended';\nimport vueconfigtypescript from '@vue\/eslint-config-typescript';\nimport vueconfigprettier from '@vue\/eslint-config-prettier';\n\n\/** @type {import('eslint').linter.config[]} *\/\nexport default [\n  {\n    languageoptions: {\n      globals: {\n        ...globals.browser,\n        ...globals.node,\n      },\n    },\n  },\n  \/\/ js\n  pluginjs.configs.recommended,\n  {\n    rules: {\n      'no-unused-vars': 'off',\n      'no-undef': 'off',\n    },\n  },\n  \/\/ ts\n  ...tseslint.configs.recommended,\n  {\n    rules: {\n      '@typescript-eslint\/no-unused-vars': 'warn',\n      '@typescript-eslint\/no-explicit-any': 'warn',\n    },\n  },\n  \/\/ vue\n  ...pluginvue.configs['flat\/recommended'],\n  {\n    files: ['*.vue', '**\/*.vue'],\n    languageoptions: {\n      parseroptions: {\n        parser: tseslint.parser,\n      },\n    },\n  },\n  {\n    rules: {\n      ...vueconfigtypescript.rules,\n      ...vueconfigprettier.rules,\n      'prettier\/prettier': [\n        'warn',\n        {\n          singlequote: true,\n        },\n      ],\n      'vue\/multi-word-component-names': 'off',\n      'vue\/attribute-hyphenation': 'off',\n      'vue\/no-v-html': 'off',\n      'vue\/v-on-event-hyphenation': 'off',\n      '@typescript-eslint\/ban-ts-comment': 'off',\n      '@typescript-eslint\/no-require-imports': 'off',\n      '@typescript-eslint\/no-explicit-any': 'off',\n    },\n  },\n  {\n    ignores: ['node_modules', '.nuxt', '.output', 'dist'],\n  },\n  \/\/ prettier\n  prettier,\n  {\n    rules: {\n      'prettier\/prettier': ['warn', { singlequote: true }],\n    },\n  },\n];\n\n<\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
     6. \u5b89\u88c5  \u6269\u5c55\u4ee5\u8fdb\u884c prettier-eslint \u96c6\u6210 <\/h3>\n
    \u8981\u4f7f\u7528 prettier \u548c eslint \u542f\u7528\u4fdd\u5b58\u65f6\u81ea\u52a8\u683c\u5f0f\u5316\uff0c\u8bf7\u5b89\u88c5\u4ee5\u4e0b visual studio code \u6269\u5c55\uff1a<\/p>\n
      \n
    •  prettier eslint<\/strong>\uff1a\u5728\u8fd9\u91cc\u4e0b\u8f7d <\/li>\n<\/ul>\n
       7.\u6dfb\u52a0\u6269\u5c55\u63a8\u8350 <\/h3>\n
      \u8981\u4e3a\u60a8\u7684\u9879\u76ee\u63a8\u8350\u6269\u5c55\uff0c\u8bf7\u5c06\u5176\u6dfb\u52a0\u5230 .vscode\/extensions.json \u6587\u4ef6\u4e2d\uff1a<\/p>\n
      {\n  \"recommendations\": [\n    \"rvest.vs-code-prettier-eslint\"\n  ]\n}\n<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
       8. \u91cd\u542fvscode <\/h3>\n
      \u914d\u7f6e\u9879\u76ee\u5e76\u5b89\u88c5\u6269\u5c55\u540e\uff0c\u91cd\u65b0\u542f\u52a8 visual studio code \u4ee5\u786e\u4fdd\u81ea\u52a8\u4fdd\u5b58\u548c\u81ea\u52a8\u683c\u5f0f\u5316\u6309\u9884\u671f\u5de5\u4f5c\u3002<\/p>\n
      \u7acb\u5373\u5b66\u4e60<\/span>\u201c\u201d\uff1b<\/p>\n
       \u6982\u62ec <\/h3>\n
      \u60a8\u7684\u9879\u76ee\u73b0\u5728\u5e94\u8be5\u8bbe\u7f6e\u4e3a\uff1a<\/p>\n
        \n
      • eslint 9.13.0\uff0c\u652f\u6301 typescript \u548c vue.js<\/li>\n
      • \u66f4\u6f02\u4eae\u7684\u96c6\u6210\u4ee5\u5b9e\u73b0\u4e00\u81f4\u7684\u4ee3\u7801\u683c\u5f0f<\/li>\n
      • \u4f7f\u7528 prettier eslint \u6269\u5c55\u5728 vscode \u4e2d\u4fdd\u5b58\u65f6\u81ea\u52a8\u683c\u5f0f\u5316<\/li>\n<\/ul>\n
        \u4ee5\u4e0a\u5c31\u662f\u4f7f\u7528 Prettier\u3001TypeScript\u3001Vuejs \u548c VSCode \u8bbe\u7f6e ESLint \u81ea\u52a8\u4fdd\u5b58\u81ea\u52a8\u683c\u5f0f\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
        \u672c\u6307\u5357\u5c06\u5f15\u5bfc\u60a8\u4f7f\u7528 eslint 9.13.0\u3001prettier \u548c \u914d\u7f6e .js \u9879\u76ee\uff0c\u4ee5\u5728 visual studio code \u4e2d\u4fdd\u5b58\u65f6\u542f\u7528\u81ea\u52a8\u4ee3\u7801\u683c\u5f0f\u5316\u548c linting\u3002 1.\u521b\u5efa\u4e00\u4e2a\u65b0\u7684 \u9996\u5148\u521b\u5efa\u4e00\u4e2a\u65b0\u7684 vue \u9879\u76ee\uff1a npm create vue@latest \u767b\u5f55\u540e\u590d\u5236 \u5bfc\u822a\u5230\u9879\u76ee\u76ee\u5f55\uff1a cd your-project-directory \u767b\u5f55\u540e\u590d\u5236 2. \u5b89\u88c5\u548c\u66f4\u65b0\u4f9d\u8d56\u9879 \u5b89\u88c5\u9879\u76ee\u4f9d\u8d56\u9879\uff1a npm install \u767b\u5f55\u540e\u590d\u5236 \u7136\u540e\uff0c\u4f7f\u7528ncu\uff08node check updates\uff09\u66f4\u65b0\u9879\u76ee\u4f9d\u8d56\u9879\uff1a npx ncu -u npm install \u767b\u5f55\u540e\u590d\u5236 3.\u5148\u51b3\u6761\u4ef6\u6dfb\u52a0eslint\u3001prettier\u548ctypescript\u5305 \u6b64\u914d\u7f6e\u9700\u8981\u5728\u672c\u5730\u6216\u5168\u5c40\u5b89\u88c5\u4ee5\u4e0b npm \u8f6f\u4ef6\u5305\uff1a prettier eslint prettier-eslint @typescript-eslint\/parser typescript vue-eslint-parser @vue\/eslint-config-typescript @vue\/eslint-config-prettier \u767b\u5f55\u540e\u590d\u5236 \u4f7f\u7528 pnpm \u6216 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-2697","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/2697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=2697"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/2697\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=2697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=2697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=2697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}