最近由于自己的项目需要，重新拾起来了开发，就找了套课程先学习一下最新前后端技术，在使用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)"
]
}
网友评论