eslint+prettier統(tǒng)一代碼風格的實現(xiàn)方法

更新時間：2020年07月22日 09:00:03 作者：羅漢爺

這篇文章主要介紹了eslint+prettier 統(tǒng)一代碼風格的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1.實現(xiàn)效果

Eslint校驗代碼語法，prettier統(tǒng)一格式化代碼，按下保存自動修復eslint錯誤，自動格式化代碼。

2.安裝vscode插件

Vetur
ESLint
Prettier - Code formatter

3.配置vscode設置

文件–首選項–設置，打開json模式，添加以下配置：

{
 // 控制工作臺中活動欄的可見性。
 "workbench.activityBar.visible": true,
 //主題設置
 "workbench.colorTheme": "Monokai",
 // 默認編輯器字號
 "editor.fontSize": 14,
 //是否自動換行
 "editor.wordWrap": "on",
 "workbench.editor.enablePreview": false, //打開文件不覆蓋
 "search.followSymlinks": false, //關(guān)閉rg.exe進程
 "editor.minimap.enabled": false, //關(guān)閉迷你圖快速預覽
 "files.autoSave": "onWindowChange", // 切換窗口時自動保存。
 "editor.lineNumbers": "on", //開啟行數(shù)提示
 "editor.quickSuggestions": {
 //開啟自動顯示建議
 "other": true,
 "comments": true,
 "strings": true
 },
 "editor.tabSize": 2, //制表符符號eslint

 //.vue文件template格式化支持，并使用js-beautify-html插件
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 //js-beautify-html格式化配置，屬性強制換行
 "vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
 "wrap_attributes": "force-aligned"
 }
 },
 //根據(jù)文件后綴名定義vue文件類型
 "files.associations": {
 "*.vue": "vue"
 },
 //配置 ESLint 檢查的文件類型
 "eslint.validate": [
 "javascript",
 "javascriptreact",
 {
 "language": "vue",
 "autoFix": true
 }
 ],
 //保存時eslint自動修復錯誤
 "eslint.autoFixOnSave": true,
 //保存自動格式化
 "editor.formatOnSave": true
}

4.配置.eslintrc.js

module.exports = {
 root: true,
 env: {
 node: true
 },
 extends: ['plugin:vue/essential', 'eslint:recommended'],
 rules: {
 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 //強制使用單引號
 quotes: ['error', 'single'],
 //強制不使用分號結(jié)尾
 semi: ['error', 'never']
 },
 parserOptions: {
 parser: 'babel-eslint'
 }
}

5.配置.prettierrc

{
 "eslintIntegration": true, 
 "singleQuote": true,
 "semi": false
}

到此這篇關(guān)于eslint+prettier 統(tǒng)一代碼風格的實現(xiàn)的文章就介紹到這了,更多相關(guān)eslint prettier 統(tǒng)一代碼風格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: