Vue项目vscode工作区常用配置及插件参考 #53
Description
推荐插件
.vscode/extensions.json
{
"recommendations": [
"octref.vetur",
"dariofuzinato.vue-peek",
"dbaeumer.vscode-eslint",
"stylelint.vscode-stylelint",
"DavidAnson.vscode-markdownlint",
"esbenp.prettier-vscode",
"mrmlnc.vscode-scss",
"Orta.vscode-jest",
"hookyqr.beautify",
"pkief.material-icon-theme",
"formulahendry.auto-close-tag",
"donjayamanne.githistory",
"ms-ceintl.vscode-language-pack-zh-hans"
]
}工作区配置
支持vetur + prettier + eslint 验证提示及代码格式化
.vscode/settings.json
{
"typescript.tsdk": "./node_modules/typescript/lib",
"typescript.check.npmIsInstalled": false,
//===========================================
//============= Editor ======================
//===========================================
"explorer.openEditors.visible": 0,
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 300,
"editor.minimap.showSlider": "always",
"editor.smoothScrolling": true,
"editor.cursorBlinking": "phase",
"editor.cursorSmoothCaretAnimation": true,
// 这个等于false editor.tabSize才生效
"editor.detectIndentation": false,
"diffEditor.ignoreTrimWhitespace": false,
//自动格式化粘贴的内容
"editor.formatOnPaste": true,
// 每次保存的时候自动格式化
"editor.formatOnSave": true,
// 显示 markdown 中英文切换时产生的特殊字符
"editor.renderControlCharacters": true,
// 编辑器提示
"editor.suggestSelection": "first",
"editor.tabCompletion": "on",
"editor.trimAutoWhitespace": true,
//可视区域折行
"editor.wordWrap": "off",
//tab空格数
"editor.tabSize": 2,
// 字号
"editor.fontSize": 12,
"editor.fontFamily": "FiraCode-Retina, Monaco, 'Courier New', monospace",
"editor.quickSuggestions": {
// 快速提示
"other": true,
"comments": true,
"strings": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
// 自动调整 import 语句相关顺序
"source.organizeImports": false
},
//缩放整个窗体
// "window.zoomLevel": 0.1,
// 工作台
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Atom One Dark",
"workbench.editor.enablePreview": true,
"workbench.activityBar.visible": true,
// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
//===========================================
//============= files =======================
//===========================================
// 失去焦点自动保存
"files.autoSave": "onFocusChange",
// 窗口失去焦点自动保存
// "files.autoSave": "onWindowChange",
// 自动保存时间
// "files.autoSaveDelay": 1000,
// 启用后，将在保存文件时剪裁尾随空格。
"files.trimTrailingWhitespace": true,
// 文件末尾插入新行
"files.insertFinalNewline": true,
// 删除文件末尾多余的新行
"files.trimFinalNewlines": true,
"files.eol": "\n",
"search.exclude": {
// 搜索排除这些区域
"**/node_modules": true,
"**/*.log": true,
"**/*.log*": true,
"**/bower_components": true,
"**/dist": true,
"**/elehukouben": true,
"**/.git": true,
"**/.gitignore": true,
"**/.svn": true,
"**/.DS_Store": true,
"**/.idea": true,
"**/.vscode": false,
"**/yarn.lock": true,
"**/tmp": true
},
"files.exclude": {
// 排除文件搜索区域，比如node_modules(默认设置已经屏蔽了)
// "**/node_modules": true,
"**/bower_components": true,
"**/.idea": true,
"**/yarn.lock": true,
"**/tmp": true,
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true
},
"files.watcherExclude": {
// 文件监视排除
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/.vscode/**": true,
"**/node_modules/**": true,
"**/tmp/**": true,
"**/bower_components/**": true,
"**/dist/**": true,
"**/yarn.lock": true
},
"files.associations": {
// 配置文件关联，以便启用对应的智能提示，比如wxss使用css
"*.vue": "vue",
"*.wxss": "css"
},
"stylelint.enable": true,
"stylelint.packageManager": "yarn",
"css.validate": true,
"less.validate": true,
"scss.validate": true,
// ===========================================
// ================ Vetur ====================
// ===========================================
"vetur.validation.template": false,
"vetur.format.options.tabSize": 2,
"vetur.format.scriptInitialIndent": true,
// 选择 vue 文件中 template 的格式化工具 使用js-beautify-html格式化 prettyhtml
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 160
},
"js-beautify-html": {
"printWidth": 400,
//设置标签内多个属性折行
// Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline]
"wrap_attributes": "force-aligned" // 单行
// "wrap_attributes": "force-expand-multiline" // 属性强制折行对齐 多行
},
"prettier": {
"proseWrap": "never",
// 显示最大宽
"printWidth": 400,
// 让perttier使用eslint的格式进行检查
"eslintIntegration": true,
// 箭头函数参数括号 默认avoid 可选 avoid | always
"arrowParens": "always",
// 使用分号, 默认true
"semi": true,
// 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
"singleQuote": true
}
},
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
// ===========================================
// ============= stylus Supremacy ============
// ===========================================
// 是否插入冒号
"stylusSupremacy.insertColons": false,
// 是否插入分号
"stylusSupremacy.insertSemicolons": false,
// 是否插入大括号
"stylusSupremacy.insertBraces": false,
// 结尾的分号
"prettier.semi": true,
// 格式化的时候双引号变单引号
"prettier.singleQuote": true,
"prettier.printWidth": 400,
"prettier.proseWrap": "never",
"prettier.vueIndentScriptAndStyle": true, // 保存自动格式化
// 在方法括号之间插入空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"javascript.implicitProjectConfig.experimentalDecorators": true,
// ===========================================
// ================ Eslint ===================
// ===========================================
// 添加 vue 支持
"eslint.format.enable": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"jsx",
"typescript",
"typescriptreact",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
],
"eslint.codeAction.showDocumentation": {
"enable": true
},
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
"markdown"
]
}.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
parser: "babel-eslint"
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"prettier/prettier": "error",
"no-console": "off",
"no-debugger": "off",
"no-new": "off",
"vue/no-side-effects-in-computed-properties": "off",
"no-useless-constructor": "off",
"vue/html-self-closing": [
"error",
{
html: {
void: "always",
normal: "always",
component: "always",
},
svg: "always",
math: "always",
},
],
"prefer-const": [
"error",
{
destructuring: "all",
ignoreReadBeforeAssign: false,
},
],
"vue/attribute-hyphenation": "error",
"vue/attributes-order": [
"error",
{
order: [
"DEFINITION",
"LIST_RENDERING",
"CONDITIONALS",
"RENDER_MODIFIERS",
"GLOBAL",
"UNIQUE",
"TWO_WAY_BINDING",
"OTHER_DIRECTIVES",
"OTHER_ATTR",
"EVENTS",
"CONTENT",
],
alphabetical: false,
},
],
"comma-dangle": ["error", "only-multiline"],
indent: "off",
"no-mixed-spaces-and-tabs": "error",
semi: ["error", "always"],
"arrow-spacing": [
"error",
{
before: true,
after: true,
},
],
"consistent-this": ["error", "that"],
"eol-last": ["error", "always"],
"wrap-iife": "error",
"no-use-before-define": [
"error",
{
functions: false,
classes: true,
},
],
"no-unused-vars": [
"error",
{
argsIgnorePattern: "^h$",
varsIgnorePattern: "^h$",
},
],
"space-before-function-paren": "off",
},
globals: {
"aladdin": true,
"BankA_AuthCore": true,
"BScroll": true,
"echarts": true,
"$": true
}
};prettier.config.js
module.exports = {
printWidth: 100,
tabWidth: 2,
useTabs: false,
semi: true,
vueIndentScriptAndStyle: true,
singleQuote: true,
quoteProps: 'as-needed',
bracketSpacing: true,
trailingComma: 'es5',
jsxBracketSameLine: false,
jsxSingleQuote: false,
arrowParens: 'always',
insertPragma: false,
requirePragma: false,
proseWrap: 'never',
htmlWhitespaceSensitivity: 'strict',
endOfLine: 'lf',
rangeStart: 0,
overrides: [
{
files: '*.md',
options: {
tabWidth: 2,
},
},
{
files: '*.scss',
options: {
tabWidth: 4,
},
},
],
};