关于web-project的工程化配置

vscode

settings.json

{
  "editor.formatOnSave": true,
  "editor.guides.bracketPairs": "active",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.requireConfig": true,
  "i18n-ally.enabledParsers": ["ts"],
  "i18n-ally.sortKeys": true,
  "i18n-ally.namespace": true,
  "i18n-ally.enabledFrameworks": ["vue"],
  "i18n-ally.keystyle": "nested",
  "i18n-ally.sourceLanguage": "zh-cn",
  "i18n-ally.displayLanguage": "zh-cn",
  "i18n-ally.translate.engines": ["google-cn", "google", "deepl"],
  "i18n-ally.localesPaths": []
}

extensions.json

{
  "recommendations": [
    "antfu.unocss",
    "lokalise.i18n-ally",
    "steoates.autoimport",
    "ms-ceintl.vscode-language-pack-zh-hans",
    "streetsidesoftware.code-spell-checker",
    "w88975.code-translate",
    "redhat.vscode-yaml",
    "chakrounanas.turbo-console-log",
    "jock.svg",
    "esbenp.prettier-vscode",
    "pnp.polacode",
    "christian-kohler.path-intellisense",
    "christian-kohler.npm-intellisense",
    "stringham.move-ts",
    "pkief.material-icon-theme",
    "marscode.marscode-extension",
    "hancel.markdown-image",
    "yzhang.markdown-all-in-one",
    "ritwickdey.liveserver",
    "xabikos.javascriptsnippets",
    "dbaeumer.vscode-eslint",
    "bierner.color-info",
    "donjayamanne.githistory",
    "mhutchie.git-graph",
    "eamodio.gitlens",
    "antfu.iconify",
    "misterj.vue-volar-extention-pack",
    "hollowtree.vue-snippets"
  ]
}

插件配置

prettier

这里使用 prettier.config.js 该文件作为配置文件，如果vscode的prettier插件未应用该文件配置，设置中找到prettier中Use Editor Config配置并勾选即可

module.exports = {
	// 一行的字符数，如果超过会进行换行，默认为80
	printWidth: 100,
	// 一个tab代表几个空格数
	tabWidth: 2,
	// 是否使用tab进行缩进，默认为false，表示用空格进行缩减
	useTabs: false,
        // vue script和style标签内容是否缩进
        vueIndentScriptAndStyle: false,
	// 行尾是否使用分号，默认为true
	semi: true,
	// 字符串是否使用单引号，默认为false(在jsx中配置无效, 默认都是双引号)
	// singleQuote: false,
	// jsx 不使用单引号，而使用双引号
	// jsxSingleQuote: false,
	// 对象的 key 仅在必要时用引号
	quoteProps: "as-needed",
	// 是否使用尾逗号,默认none,可选 none|es5|all
	// es5 包括es5中的数组、对象
	// all 包括函数对象等所有可选
	trailingComma: "none",
	// 对象大括号直接是否有空格，默认为true
	// true: { foo: bar }
	// false: {foo: bar}
	bracketSpacing: true,
	// JSX标签闭合位置 默认false, 标签的反尖括号需要换行
	// false: <div
	//          className=""
	//          style={{}}
	//       >
	// true: <div
	//          className=""
	//          style={{}} >
	jsxBracketSameLine: false,
	// 使用默认的折行标准 always
	proseWrap: "preserve",
	// 箭头函数参数括号, 只有一个参数的时候，也需要括号, 默认avoid 可选 avoid| always
	// avoid 能省略括号的时候就省略 例如x => x
	// always 总是有括号
	arrowParens: "avoid",
	// 换行符使用 lf auto
	endOfLine: "lf",
	// 根据显示样式决定 html 要不要折行
	htmlWhitespaceSensitivity: "ignore",
	// 不使用prettier格式化的文件填写在项目的.prettierignore文件中
	ignorePath: ".prettierignore"
	// Require a "prettierconfig" to format prettier
        // 改行可能会影响插件生效
	// requireConfig: true
};

更新中...