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"
	}
}

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