VSCode配置格式化工具(Prettier/Vetur/ESLint)和jsconfig.json

VSCode配置格式化工具(Prettier/Vetur/ESLint)

网上很多配置,有的过时了, 有的很杂, 自己看了下文档,简单配置了以下, 顺便记录下来。
准备
用vue-cli建好项目之后,在VSCode安装插件
ESLint document,Prettier - Code formatter document, Vetur document。
cli install
Launch VS Code Quick Open (Ctrl+P)

ext install esbenp.prettier-vscode

配置
.eslintrc.js使用vue-cli默认生产的就行

新建一个.prettierrc.js

需要什么配置, 自己对文档改

module.exports = {trailingComma: 'es5',printWidth: 100,tabWidth: 2,useTabs: false,semi: false,singleQuote: true,jsxSingleQuote: true,bracketSpacing: true,jsxBracketSameLine: true,arrowParens: "avoid"
}

.eslintrc.js
使用默认的
.eslintignore
可以配置ignore文件

/public/
/dist/
/node_modules/
/src/icons/svg/
/mock/

VSCode的配置settings.json

注意: The old eslint.autoFixOnSave setting is now deprecated and can safely be removed.

{"workbench.iconTheme": "vscode-icons","files.autoSave": "afterDelay","editor.fontSize": 16,"editor.mouseWheelZoom": true,"editor.suggest.snippetsPreventQuickSuggestions": false,"liveServer.settings.donotShowInfoMsg": true,"workbench.colorTheme": "Material","terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe","editor.tabSize": 2,"editor.tabCompletion": "on",// 下面这几个, 怎么配看文档"editor.defaultFormatter": "esbenp.prettier-vscode","eslint.enable": true,"editor.codeActionsOnSave": {"source.fixAll": false,"source.fixAll.eslint": true //保存自动修复, eslint.autoFixOnSave已废弃}}

如果要配置js-beautify之类的,自己看下文档, 我就不配那么多东西了, 合适够用就好了。

配置script命令

  "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint", //自带的修复"lint-check": "eslint --ext .js,.vue src", // 检查"lint-fix": "eslint --fix --ext .js,.vue src" // 修复},

运行yarn lint-check/fix可以检查/修复,yarn lint修复会有修复文件的提示

配置jsconfig.json

参考vertur
路径映射:如用@引入模块会有路径提示

import module from '@/components/module'

jsconfig.json

{"compilerOptions": {"experimentalDecorators": true,"baseUrl": "./","paths": {"components/*": ["src/components/*"],"@/*": ["src/*"]}},"exclude": ["node_modules"],"include": ["src/*"]
}

或者使用tsconfig.json

配置常用代码片段

在VSCode’文件’->‘首选项’->‘用户代码片段’,新建代码片段
defaultSinppets.code-snippets.json

{// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. // Placeholders with the same ids are connected.// Example:// "Print to console": {//     "scope": "javascript,typescript",//     "prefix": "log",//  "body": [//       "console.log('$1');",//         "$2"//    ],//    "description": "Log output to console"// }"Print to console": {"scope": "javascript,typescript","prefix": "clg","body": ["console.log('$1')","$2"],"description": "Log output to console"},"Print to dir": {"scope": "javascript,typescript","prefix": "cd","body": ["console.dir('$1')","$2"],"description": "Log output to dir"}
}

希望对你有帮助, 有问题请留言