最近由于自己的項(xiàng)目需要擎浴，重新拾起來(lái)了開發(fā)玷禽，就找了套課程先學(xué)習(xí)一下最新前后端技術(shù)丰介，在使用vscode時(shí)，由于集成了插件Eslint和Prettier肪虎，在ts或是vue文件下有些代碼會(huì)有紅線提示劣砍，看著很別扭，在查閱和折騰了半天以后扇救，發(fā)現(xiàn)還是不夠完美刑枝，后來(lái)發(fā)現(xiàn)一個(gè)三方庫(kù)把這事完美的解決了，而且支持各種項(xiàng)目迅腔。
在使用Eslint插件的時(shí)候仅讽，需要?jiǎng)?chuàng)建.eslintrc.js文件，在里面要寫一大堆的配置代碼钾挟，還要安裝多個(gè)依賴插件洁灵，現(xiàn)在使用code-style-lint只需要幾行代碼就可以完美搞定了。
第一步：先根據(jù)項(xiàng)目類型導(dǎo)入對(duì)應(yīng)的庫(kù)掺出，我的項(xiàng)目是用nuxt3創(chuàng)建的徽千。
//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
第二步，創(chuàng)建.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等其他類型項(xiàng)目的用法双抽，
可參考原插件作者的github：https://github.com/IrenCore/code-style-lint
我覺得挺好的，幫了我大忙了闲礼，自己研究了半天沒(méi)整好牍汹，覺得好用的記得給作者一個(gè)start铐维，哈哈，我看著才幾個(gè)星星慎菲。
[One More Thing..]
另外你可能還會(huì)發(fā)現(xiàn)另一個(gè)問(wèn)題嫁蛇，有些文件里會(huì)有白色線的提示！
例如：文件是一個(gè) CommonJS 模塊露该；它可以轉(zhuǎn)換為 ES6 模塊
這是 Visual Studio Code 中添加的一項(xiàng)新功能睬棚，稱為建議代碼操作".建議代碼操作"在 JavaScript 和 TypeScript 中默認(rèn)啟用。
可以通過(guò)在您的用戶/工作區(qū)設(shè)置中設(shè)置:"typescript.suggestionActions.enabled": false 和 "javascript.suggestionActions.enabled": false 來(lái)禁用它們解幼。
附上我自己整理的settings.json（直接拷貝抑党，用到的第三方插件也都標(biāo)注了，在vscdoe安裝對(duì)應(yīng)的第三方插件后關(guān)閉重啟vscode）
{
//常規(guī)配置
"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, //是否在保存時(shí)格式化文件
//打開文件不覆蓋
"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",//自動(dòng)保存
// 針對(duì)特定文件文件更改配置
"[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, // 函數(shù)左括號(hào){是否換行
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
"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, // 忽略規(guī)則中的warning項(xiàng)撵摆，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, // 格式化時(shí)為單引號(hào)
"prettier.trailingComma": "none", // 不加逗號(hào)
"prettier.semi": false, // 不加分號(hào)
"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插件,手機(jī)項(xiàng)目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)"
]
}
