首先需要裝一些vscode插件
eslint液南、Vetur她我、Prettier Now球切、koroFileHeader谷誓、live Server
在左下角設(shè)置界面，打開設(shè)置吨凑，修改配置文件settings.json
{
? ? "workbench.colorTheme": "One Monokai",
? ? "editor.fontSize": 14,
? ? "workbench.editor.enablePreview": true, //預(yù)覽模式關(guān)閉
? ? "editor.formatOnSave": true, // #每次保存的時(shí)候自動(dòng)格式化
? ? // 自動(dòng)修復(fù)
? ? "editor.codeActionsOnSave": {
? ? ? "source.fixAll.eslint": true,
? ? },
? ? "eslint.enable": true, //是否開啟vscode的eslint
? ? // 配置 ESLint 檢查的文件類型
? ? "eslint.validate": [
? ? ? "javascript",
? ? ? "vue",
? ? ? "html"
? ? ],
? ? "eslint.options": { //指定vscode的eslint所處理的文件的后綴
? ? ? "extensions": [
? ? ? ? ".js",
? ? ? ? ".vue",
? ? ? ? ".ts",
? ? ? ? ".tsx"
? ? ? ]
? ? },
? ? "files.associations": {
? ? ? "*.wpy": "vue",
? ? ? "*.wxml": "wxml",
? ? ? "*.cjson": "jsonc",
? ? ? "*.wxss": "css",
? ? ? "*.wxs": "javascript",
? ? ? "*.html": "html"
? ? },
? ? "emmet.includeLanguages": {
? ? ? "wxml": "html"
? ? },
? ? "minapp-vscode.disableAutoConfig": true,
? ? // vscode默認(rèn)啟用了根據(jù)文件類型自動(dòng)設(shè)置tabsize的選項(xiàng)
? ? "editor.detectIndentation": false,
? ? // 重新設(shè)定tabsize
? ? "editor.tabSize": 2,
? ? //? #去掉代碼結(jié)尾的分號(hào)
? ? "prettier.semi": false,
? ? //? #使用單引號(hào)替代雙引號(hào)
? ? "prettier.singleQuote": true,
? ? //? #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
? ? "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
? ? // #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
? ? "vetur.format.defaultFormatter.js": "vscode-typescript",
? ? "git.enableSmartCommit": true,
? ? "editor.quickSuggestions": {
? ? ? "strings": true
? ? },
? ? //一定要在vutur.defaultFormatterOptions參數(shù)中設(shè)置捍歪，單獨(dú)修改prettier擴(kuò)展的設(shè)置是無(wú)法解決這個(gè)問題的，因?yàn)閜erttier默認(rèn)忽略了vue文件（事實(shí)上從忽略列表移除vue也不能解決這個(gè)問題）
? ? "vetur.format.defaultFormatterOptions": {
? ? ? "prettier": {
? ? ? ? "semi": false, // 格式化不加分號(hào)
? ? ? ? "singleQuote": true, // 格式化以單引號(hào)為主
? ? ? },
? ? ? "js-beautify-html": {
? ? ? ? // force-aligned | force-expand-multiline
? ? ? ? "wrap_attributes": "force-aligned"
? ? ? },
? ? ? "prettyhtml": {
? ? ? ? "printWidth": 100,
? ? ? ? "singleQuote": false,
? ? ? ? "wrapAttributes": false,
? ? ? ? "sortAttributes": true
? ? ? },
? ? },
? ? // 插件KoroFileHeader
? ? // 文件頭部注釋-快捷鍵crtl+alt+i（window）,ctrl+cmd+t (mac)
? ? "fileheader.customMade": {
? ? ? "Descripttion": "",
? ? ? //"version": "",
? ? ? "Author": "voanit",
? ? ? "Date": "Do not edit",
? ? ? "LastEditors": "voanit",
? ? ? "LastEditTime": "Do not Edit"
? ? },
? ? //函數(shù)注釋-快捷鍵ctrl+alt+t (window), ctrl+alt+t(mac)
? ? "fileheader.cursorMode": {
? ? ? "name": "",
? ? ? // "test": "test font",
? ? ? // "msg": "",
? ? ? "param": "",
? ? ? "return": ""
? ? },
? ? //安裝live Server插件
? ? "liveServer.settings.donotVerifyTags": true,
? ? "liveServer.settings.donotShowInfoMsg": true,
? ? "liveServer.settings.NoBrowser": true,
? ? "liveServer.settings.CustomBrowser": "chrome", //設(shè)置默認(rèn)打開的瀏覽器
? ? "liveServer.settings.host": "127.0.0.1",
? ? "liveServer.settings.port": 5000, //設(shè)置本地服務(wù)的端口號(hào)
? ? "liveServer.settings.root": "/distserver",
? ? "[vue]": {
? ? ? "editor.defaultFormatter": "octref.vetur"
? ? },
? ? "javascript.updateImportsOnFileMove.enabled": "never",
? ? "javascript.implicitProjectConfig.experimentalDecorators": true,
? ? "workbench.editor.showTabs": true,
? ? "terminal.integrated.rendererType": "dom",
? ? "sync.gist": "396472a5bb443e3680d5a0e2ffccefe8",
? ? "window.zoomLevel": 0,
? ? "diffEditor.ignoreTrimWhitespace": false,
? ? "launch": {},
? ? "[jsonc]": {
? ? ? "editor.defaultFormatter": "remimarsal.prettier-now"
? ? },
? ? "[typescript]": {
? ? ? "editor.defaultFormatter": "remimarsal.prettier-now"
? ? },
? ? "json.schemas": [
? ? ? {
? ? ? ? "fileMatch": [
? ? ? ? ? "/myfile"
? ? ? ? ],
? ? ? ? "url": "schemaURL"
? ? ? }
? ? ]
}
prettier Now配合eslint使用的怀骤，以上配置會(huì)存在eslint和Prettier Now沖突费封，
需要在.eslintrc.js里面配置extends: [ 'prettier-now' ]，
perttier-now一定要放到最后這樣才能覆蓋eslint格式化的樣式
-----------------------------------------------------------------
