當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

VS Code 自动修改和保存代码风格 == eslint+prettier

發布時間：2023/12/20 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 VS Code 自动修改和保存代码风格 == eslint+prettier 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

??? 最近因為用到VS Code，需要統一所有人的代碼風格（前端語言js/html/css等，或者后端語言 go/python等也可以這么用）。

所以參考了一些網絡資料，記錄下設置步驟，以便后續查閱。

Step 1: npm 命令窗口，安裝需要的插件

cmd >> npm i -D prettier

# eslint-plugin-prettier插件會調用prettier對你的代碼風格進行檢查，其原理是先使用prettier對你的代碼進行格式化，

# 然后與格式化之前的代碼進行對比，如果過出現了不一致，這個地方就會被prettier進行標記。

cmd >> npm i -D eslint-plugin-prettier

# eslint-config-prettier可以關閉eslint可能與prettier發生沖突的代碼格式化規則。

# 官方稱eslint-plugin-prettier需要與eslint-config-prettier搭配食用才能獲得最佳效果。

cmd >> npm i -D eslint-config-prettier

Step 2: 創建react項目

cmd >> cd H:\0_VSCode_Work

cmd >> create-react-app my-app-03

# 打開項目

cmd >> cd ./my-app-03

cmd >> code .

Step 3: 創建項目的.eslintignore文件

# 文件路徑 = MY-APP-03/.eslintignore

# 在vs code中手動創建文件后".eslintignore"，輸入如下文件內容。

/build/ /config/ /dist/ /*.js /test/unit/coverage/

Step 4: 創建項目的.eslintrc.js文件

# 文件路徑 = MY-APP-03/src/.eslintrc.js

# 在vs code中手動創建文件后".eslintrc.js"，輸入如下文件內容。

module.exports = {root: true,env: {browser: true,es6: true,node: true},extends: ['standard','plugin:vue/essential','eslint:recommended',"plugin:prettier/recommended"],rules: {"prettier/prettier": "error",// allow async-await'generator-star-spacing': 'off','no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',//強制使用單引號quotes: ['error', 'single'],//強制不使用分號結尾semi: ['error', 'never']},parserOptions: {parser: 'babel-eslint'} }

Step 5: 創建項目的.prettierrc文件

# 文件路徑 = MY-APP-03/.prettierrc

# 在vs code中手動創建文件后".prettierrc"，輸入如下文件內容。

{//一行的字符數，如果超過會進行換行，默認為80"printWidth": 80, //一個tab代表幾個空格數，默認為80"tabWidth": 2, //是否使用tab進行縮進，默認為false，表示用空格進行縮減"useTabs": false, //字符串是否使用單引號，默認為false，使用雙引號"singleQuote": false, //行位是否使用分號，默認為true"semi": true, //是否使用尾逗號，有三個可選值"<none|es5|all>""trailingComma": "none", //對象大括號直接是否有空格，默認為true，效果：{ foo: bar }"bracketSpacing": true, //代碼的解析引擎，默認為babylon，與babel相同"parser": "babylon", //開啟 eslint 支持"eslintIntegration": true }

Step6 : 修改項目工作區設置文件.vscode/settings.json

# 單擊IDE工具的左下角的齒輪，然后單擊菜單"Settings", 在彈出的面板Settings中，選擇子面板"Workspace"，如下圖

# 然后，找到參數"Files:Associations"，單擊按鈕"Edit in setting.json"

# 然后，在settings.json文件中，輸入和保存如下內容。

{//.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"}},//根據文件后綴名定義vue文件類型"files.associations": {"*.vue": "vue"},//配置 ESLint 檢查的文件類型"eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": true}],//保存時eslint自動修復錯誤"eslint.autoFixOnSave": true,//保存自動格式化"editor.formatOnSave": true }

或者，少設置一些參數，如下

最后，記得保存settings.json文件

Step7 : 最后，我們測試一下效果

# 首先，創建一個demo.html文件，如下

文件路徑 = MY-APP-03/public/demo.html

# 然后，我們單擊快捷鍵"Ctrl+S" 或菜單"Fiel >> Save All", 則IDE工具自動將上面格式混亂的代碼轉化為風格整潔的代碼，如下圖所示

轉載于:https://www.cnblogs.com/itshare/p/11028299.html

總結

以上是生活随笔為你收集整理的VS Code 自动修改和保存代码风格 == eslint+prettier的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

编程问答

VS Code 自动修改和保存 代码风格 == eslint+prettier

總結

VS Code 自动修改和保存代码风格 == eslint+prettier