@
之前說了前端框架的演進，那就開干吧！開干之前我們初始化vue項目后，我們需要配置些什么讓我們的coding之路更高效呢？本文就來總結一下vscode的常用配置！
下載插件
- vetur
Vetur支持.vue文件的語法高亮顯示，除了支持template模板以外，還支持大多數主流的前端開發腳本和插件，比如Sass和TypeScrip
- eslint
- 審查代碼是否符合編碼規范和統一的代碼風格；
- 審查代碼是否存在語法錯誤
npm install eslint --save-dev
注意：這里之所以安裝了對應的依賴還安裝插件是因為后面我們的配置需要插件來協助，不然是無法識別的！
setting.json配置
快捷鍵：crtl+shift+p搜索setting.json 帶有default那個就是了
{
"window.zoomLevel": 1,
"terminal.integrated.rendererType": "dom",
// 打開代碼自動提示
"editor.suggest.snippetsPreventQuickSuggestions": false,
// 文件格式
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
// tab 自動補全標簽
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html"
},
// 代碼縮進修改成4個空格 如果同時設置了eslint縮進會和其沖突(如果你不要eslint 可以放開下面三個配置)
// "editor.tabSize": 4,
// "editor.formatOnType": true, // 代碼格式化 同eslint沖突
// "editor.formatOnSave": true, // 代碼保存時自動格式化 同eslint沖突
// 不檢查縮進，保存后統一按設置項來設置
"editor.detectIndentation": false,
// 控制 Markdown 預覽中使用的字號(以像素為單位)。
"markdown.preview.fontSize": 13,
// 控制終端的字號(以像素為單位)。
"terminal.integrated.fontSize": 12,
// 切換文件時自動保存
"files.autoSave": "onFocusChange",
// 文件保存時自動去除多余的空格
"files.trimTrailingWhitespace": true,
// 終端選中即復制
"terminal.integrated.copyOnSelection": true,
// 換行
"editor.wordWrap": "on",
"editor.fontSize": 13,
// 設置行高
"editor.lineHeight": 20,
// "eslint.autoFixOnSave": true,
// "eslint.validate": [
// "javascript",
// "javascriptreact",
// "html",
// {
// "language": "vue",
// "autoFix": true
// }
// ],
"eslint.options": {
"plugins": [
"html"
]
},
"vetur.validation.template": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 屬性強制折行對齊
"wrap_attributes": "force-aligned",
}
},
//空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
.eslintrc.js配置
// https://eslint.org/docs/user-guide/configuring
module.exports = {
//此項是用來告訴eslint找當前配置文件不能往父級查找
root: true,
//此項是用來指定eslint解析器的，解析器必須符合規則，babel-eslint解析器是對babel解析器的包裝使其與ESLint解析
parser: "babel-eslint",
//此項是用來指定javaScript語言類型和風格，sourceType用來指定js導入的方式，默認是script，此處設置為module，指某塊導入方式
parserOptions: {
// 設置 script(默認) 或 module，如果代碼是在ECMASCRIPT中的模塊
sourceType: "module",
"ecmaVersion": 6,
"ecmaFeatures": {
"jsx": true
}
},
// 此項指定環境的全局變量，下面的配置指定為瀏覽器環境
env: {
"browser": true,
"node": true,
"commonjs": true,
"es6": true,
"amd": true
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
// 此項是用來配置標准的js風格，就是說寫代碼的時候要規范的寫，如果你使用vs-code我覺得應該可以避免出錯
extends: "vue",
// 此項是用來提供插件的，插件名稱省略了eslint-plugin-，下面這個配置是用來規范html的
plugins: [
"html",
"flow-vars",
"react"
],
/*
下面這些rules是用來設置從插件來的規范代碼的規則，使用必須去掉前綴eslint-plugin-
主要有如下的設置規則，可以設置字符串也可以設置數字，兩者效果一致
"off" -> 0 關閉規則
"warn" -> 1 開啟警告規則
"error" -> 2 開啟錯誤規則
*/
rules: {
"indent": ["warn", 4], // 縮進4個空格
"consistent-return": 0, // return 后面是否允許省略
"quotes": 0, // 強制一致使用反引號，雙引號或單引號
"prefer-const": 0, // 如果一個變量從不重新分配，使用const聲明更好
"space-before-function-paren": 0, // 函數定義時括號前面要不要有空格
// "space-before-function-paren": ["error", { // 函數括號前端需要一個空格
// "anonymous": "always",
// "named": "always",
// "asyncArrow": "ignore"
// }],
"camelcase": 0,//強制駝峰法命名
"semi": ["error", "always"], // 語句后面添加的分號
"no-unneeded-ternary": 0, // 當存在更簡單的選擇時不允許三元運算符
"no-return-assign": 0, //
"object-curly-spacing": 0, // 在大括號內強制執行一致的間距
"padded-blocks": 'off', // 要求或不允許塊內的填充
"arrow-parens": 0, // 它也將有助於找到箭頭函數（=>），這些函數可能被錯誤地包含在一個條件中，如果這樣的比較>=是有意的。
"generator-star-spacing": 0, // 圍繞*生成器函數（generator-star-spacing）強制執行間距
"no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
// "semi-spacing": ["error", {"before": false, "after": false}], // 分號前后不准有空格
"no-trailing-spaces": ["error", { "skipBlankLines": true }], // 允許在空行上結尾空白
"no-multiple-empty-lines": ["error", {
"max": 2, // "max"（默認2：）強制連續空行的最大數量
"maxEOF": 2, // "maxEOF" 在文件末尾強制執行最大數量的連續空行
"maxBOF": 2 // "maxBOF" 在文件的開頭強制執行最大數量的連續空行
}],
"eslint.validate": [
//開啟對.vue文件中錯誤的檢查
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
]
}
};
.editorconfig配置
# EditorConfig文件使用INI格式。斜杠(/)作為路徑分隔符，#或者;作為注釋。路徑支持通配符:
# 表明是最頂層的配置文件，發現設為true時，才會停止查找.editorconfig文件
root = true
# * 匹配除/之外的任意字符
# ** 匹配任意字符串
# ? 匹配任意單個字符
# [name] 匹配name字符
# [!name] 不匹配name字符
# [s1,s2,s3] 匹配給定的字符串
# [num1..num2] 匹配num1到mun2直接的整數
[*]
# 文件的charset。有以下幾種類型：latin1, utf-8, utf-8-bom, utf-16be, utf-16le
charset = utf-8
# 縮進使用 tab 或者 space
indent_style = space
# 縮進為 space 時，縮進的字符數
indent_size = 4
# 換行符的類型。lf, cr, crlf三種
end_of_line = lf
# 是否將行尾空格自動刪除
trim_trailing_whitespace = true
# 是否使文件以一個空白行結尾
insert_final_newline = true
.eslintignore配置
一般默認的，我們無需修改
build/*.js
config/*.js
node_modules/*.js
static/*/*.js
src/vendor/plugins/*.js
js修改
一般，我們需要編譯時就校驗而不是webpack打包時再校驗，可以注釋掉webpack.dev.conf.js中的此段js
const createLintingRule = () => (
{
// test: /\.(js|vue)$/,
// loader: 'eslint-loader',
// enforce: 'pre',
// include: [resolve('src'), resolve('test')],
// options: {
// formatter: require('eslint-friendly-formatter'),
// emitWarning: !config.dev.showEslintErrorsInOverlay
// }
}
);
而我們如果需要禁用eslint只需要在config下的index.js中將useEslint: true,改為false即可！
配置vue 模版
操作如下圖：
{
"Create vue template": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"container\">\n",
" </div>",
"</template>\n",
"<script>",
"export default {",
" name: 'c',",
" data () {",
" return {\n",
" }",
" },",
" props: {},",
" components: {},",
" watch: {},",
" computed: {},",
" created () {},",
" mounted () {},",
" methods: {}",
"}",
"</script>\n",
"<style scoped lang=\"scss\">\n",
"</style>",
"$2"
],
"description": "Create vue template"
}
}
那么我們只需要新建一個.vue類型的頁面，然后輸入vue就可以根據提示便生成了一個空的頁面模版如下：
注：這里我們配置模版，盡量按vue的生命周期，從前向后配置！引入的組件和定義的數據還是放在script標簽內的最上層，這樣一進入頁面整個數據層的結構便一目了然！
小結：工欲善其事，必先利其器！后面將繼續總結es6語法，vue數據雙向綁定，父子組件通信，函數異步調用，bus、store、路由等配置及用法。奧力給，前端代碼也擼起來吧！