最近由于自己的項目需要，重新拾起來了開發，就找了套課程先學習一下最新前后端技術，在使用vscode時，由于集成了插件Eslint和Prettier，在ts或是vue文件下有些代碼會有紅線提示，看著很別扭，在查閱和折騰了半天以后，發現還是不夠完美，后來發現一個三方庫把這事完美的解決了，而且支持各種項目。
在使用Eslint插件的時候，需要創建.eslintrc.js文件，在里面要寫一大堆的配置代碼，還要安裝多個依賴插件，現在使用code-style-lint只需要幾行代碼就可以完美搞定了。
第一步：先根據項目類型導入對應的庫，我的項目是用nuxt3創建的。
//npm
npm install eslint-config-code-style-lint-nuxt3-tseslintprettier-D
//pnpm
pnpm install eslint-config-code-style-lint-nuxt3-tseslintprettier-D
//yarn
yarn add eslint-config-code-style-lint-nuxt3-tseslintprettier-D
第二步，創建.eslintrc.js文件
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: ['code-style-lint-vue3-ts'],
rules: {
'vue/multi-word-component-names': 'off'
}
}
完成上面2步就基本搞定了，其他如vue3或是react等其他類型項目的用法，
可參考原插件作者的github：https://github.com/IrenCore/code-style-lint
我覺得挺好的，幫了我大忙了，自己研究了半天沒整好，覺得好用的記得給作者一個start，哈哈，我看著才幾個星星。
[One More Thing..]
另外你可能還會發現另一個問題，有些文件里會有白色線的提示！
例如：文件是一個 CommonJS 模塊；它可以轉換為 ES6 模塊
這是 Visual Studio Code 中添加的一項新功能，稱為建議代碼操作".建議代碼操作"在 JavaScript 和 TypeScript 中默認啟用。
可以通過在您的用戶/工作區設置中設置:"typescript.suggestionActions.enabled": false 和 "javascript.suggestionActions.enabled": false 來禁用它們。
附上我自己整理的settings.json（直接拷貝，用到的第三方插件也都標注了，在vscdoe安裝對應的第三方插件后關閉重啟vscode）
{
//常規配置
"window.zoomLevel": 2,//窗口縮放
"window.commandCenter": false,
"window.autoDetectColorScheme": true,
"security.workspace.trust.untrustedFiles": "open",
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"vsicons.dontShowNewVersionMessage": true,
"editor.codeLensFontSize": 16,
"editor.fontSize": 16,
"editor.tabSize": 2,
"editor.tabCompletion": "onlySnippets",
"editor.snippetSuggestions": "top",
"editor.guides.bracketPairs": true,
"editor.formatOnPaste": true,
"editor.detectIndentation": false,
"editor.linkedEditing": true,
"editor.formatOnType": true,
"editor.unicodeHighlight.allowedLocales": {
"zh-hans": true,
"ja": true
},
"editor.formatOnSave": false, //是否在保存時格式化文件
//打開文件不覆蓋
"workbench.editor.enablePreview": false,
"workbench.editor.splitInGroupLayout": "vertical",
//主題
"workbench.preferredDarkColorTheme": "JetBrains Darcula Theme", //第三方插件主題
"workbench.colorTheme": "JetBrains Darcula Theme",//第三方插件主題
"workbench.iconTheme": "vscode-icons",
"files.eol": "\n",
"files.autoGuessEncoding": true,
"files.autoSave": "onFocusChange",//自動保存
// 針對特定文件文件更改配置
"[markdown]": {
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
}
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//TS配置
"typescript.updateImportsOnFileMove.enabled": "always",
"typescript.suggestionActions.enabled": false,
"javascript.format.placeOpenBraceOnNewLineForControlBlocks": false, // 函數左括號{是否換行
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 讓函數(名)和后面的括號之間加個空格
"javascript.suggestionActions.enabled": false,
//volar插件
"volar.autoCompleteRefs": true,
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"volar.icon.splitEditors": true,
"volar.completion.preferredAttrNameCase": "auto-camel",
"volar.completion.preferredTagNameCase": "pascal",
// eslint插件
"eslint.enable": true, // 是否開啟vscode的eslint
"eslint.quiet": false, // 忽略規則中的warning項，false為不忽略，true為忽略
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue"
],
"eslint.run": "onSave",
"eslint.options": {
"extensions": [
".js",
".vue",
".ts",
".tsx"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
//prettier插件
"prettier.singleQuote": true, // 格式化時為單引號
"prettier.trailingComma": "none", // 不加逗號
"prettier.semi": false, // 不加分號
"prettier.jsxSingleQuote": true,
"prettier.tabWidth": 2,
"prettier.bracketSpacing": true,
"prettier.arrowParens": "avoid",
"prettier.printWidth": 200,
"prettier.endOfLine": "crlf",
"prettier.proseWrap": "never",
// liverServer插件
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags": true,
// TODO-Tree插件
"todo-tree.highlights.enabled": true,
"todo-tree.general.tags": [
"BUG",
"HACK",
"FIXME",
"TODO",
"NOTE"
],
//Comment Translate 翻譯插件
"commentTranslate.hover.string": true,
"commentTranslate.hover.variable": true,
"commentTranslate.multiLineMerge": true,
// px-to-rem插件,手機項目rem適配
"px-to-rem.px-per-rem": 100,
//Path Autocomplete插件 配置@的路徑提示
"path-autocomplete.pathMappings": {
"@": "${folder}/src"
},
//power mode 代碼特效插件
"powermode.enabled": true,
"powermode.shake.intensity": 0,
"powermode.combo.counterSize": 0,
"indentRainbow.indicatorStyle": "light",
"indentRainbow.lightIndicatorStyleLineWidth": 1,
"indentRainbow.colors": [
"rgba(255,255,64,0.3)",
"rgba(127,255,127,0.3)",
"rgba(255,127,255,0.3)",
"rgba(79,236,236,0.3)"
]
}
